/* ==========================================================================
   Flavor Theme - Design Tokens
   Based on shadcn/ui HSL token system for composability.
   Usage: hsl(var(--token)) in component styles.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Font Face: Inter Variable
   -------------------------------------------------------------------------- */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/InterVariable.woff2") format("woff2");
}

@font-face {
  font-family: "Inter";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/InterVariable-Italic.woff2") format("woff2");
}

/* --------------------------------------------------------------------------
   Light Theme (Default)
   -------------------------------------------------------------------------- */

:root {
  /* Background & Foreground */
  --background: 0 0% 100%;
  --foreground: 240 10% 3.9%;

  /* Card */
  --card: 0 0% 100%;
  --card-foreground: 240 10% 3.9%;

  /* Popover */
  --popover: 0 0% 100%;
  --popover-foreground: 240 10% 3.9%;

  /* Primary (Blue #2563eb) */
  --primary: 221.2 83.2% 53.3%;
  --primary-foreground: 0 0% 100%;

  /* Secondary */
  --secondary: 240 4.8% 95.9%;
  --secondary-foreground: 240 5.9% 10%;

  /* Muted */
  --muted: 240 4.8% 95.9%;
  --muted-foreground: 240 4% 53%;

  /* Accent */
  --accent: 240 4.8% 95.9%;
  --accent-foreground: 240 5.9% 10%;

  /* Destructive */
  --destructive: 0 84.2% 60.2%;

  /* Border & Input */
  --border: 240 5.9% 90%;
  --input: 240 5.9% 90%;

  /* Ring (focus) */
  --ring: 221.2 83.2% 53.3%;

  /* Code blocks */
  --code-bg: 222.2 47.4% 11.2%;
  --code-fg: 210 40% 98%;

  /* Radius */
  --radius: 0.625rem;

  /* Shadows */
  --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);

  /* Transitions */
  --transition-colors: color 0.15s ease, background-color 0.15s ease,
    border-color 0.15s ease, text-decoration-color 0.15s ease, fill 0.15s ease,
    stroke 0.15s ease;

  /* Font Families */
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system,
    BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans",
    sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
    "Noto Color Emoji";
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
    "Liberation Mono", "Courier New", monospace;
}

/* --------------------------------------------------------------------------
   Dark Theme
   -------------------------------------------------------------------------- */

.dark {
  /* Background & Foreground */
  --background: 240 10% 3.9%;
  --foreground: 0 0% 98%;

  /* Card */
  --card: 240 10% 3.9%;
  --card-foreground: 0 0% 98%;

  /* Popover */
  --popover: 240 10% 3.9%;
  --popover-foreground: 0 0% 98%;

  /* Primary (same blue) */
  --primary: 221.2 83.2% 53.3%;
  --primary-foreground: 0 0% 100%;

  /* Secondary */
  --secondary: 240 3.7% 15.9%;
  --secondary-foreground: 0 0% 98%;

  /* Muted */
  --muted: 240 3.7% 15.9%;
  --muted-foreground: 240 5% 64.9%;

  /* Accent */
  --accent: 240 3.7% 15.9%;
  --accent-foreground: 0 0% 98%;

  /* Destructive */
  --destructive: 0 62.8% 30.6%;

  /* Border & Input */
  --border: 240 3.7% 15.9%;
  --input: 240 3.7% 15.9%;

  /* Ring */
  --ring: 221.2 83.2% 53.3%;

  /* Shadows (subtle in dark mode) */
  --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.15);
  --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.25), 0 1px 2px -1px rgb(0 0 0 / 0.25);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.3), 0 2px 4px -2px rgb(0 0 0 / 0.3);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.35), 0 4px 6px -4px rgb(0 0 0 / 0.35);
}