/* ===========================================================================
   LinkUp — Color tokens
   Reverse-extracted from frontend/src/index.css (@layer base :root + .dark).
   Colors are stored as raw HSL triplets and consumed with hsl(var(--token)).
   Neutral ramp is zinc. Primary action color is achromatic (black/white).
   Color is reserved for STATUS and a sparingly-used indigo→violet gradient.
   =========================================================================== */

:root {
  /* --- Surfaces & text (light) --- */
  --background: 0 0% 100%;          /* @kind color */ /* #FFFFFF app background */
  --foreground: 240 10% 3.9%;       /* @kind color */ /* #09090B primary text */
  --card: 0 0% 100%;                /* @kind color */ /* #FFFFFF surface */
  --card-foreground: 240 10% 3.9%;  /* @kind color */ /* #09090B */
  --popover: 0 0% 100%;             /* @kind color */ /* #FFFFFF */
  --popover-foreground: 240 10% 3.9%; /* @kind color */ /* #09090B */

  /* --- Primary (achromatic) --- */
  --primary: 0 0% 0%;               /* @kind color */ /* #000000 primary action */
  --primary-foreground: 0 0% 98%;   /* @kind color */ /* #FAFAFA on-primary */

  /* --- Subtle fills & muted --- */
  --secondary: 240 4.8% 95.9%;          /* @kind color */ /* #F4F4F5 chips, pills */
  --secondary-foreground: 240 5.9% 10%; /* @kind color */ /* #18181B */
  --muted: 240 4.8% 95.9%;              /* @kind color */ /* #F4F4F5 inputs, search */
  --muted-foreground: 240 3.8% 46.1%;   /* @kind color */ /* #71717A secondary text */
  --accent: 240 4.8% 95.9%;             /* @kind color */ /* #F4F4F5 hover/selected */
  --accent-foreground: 240 5.9% 10%;    /* @kind color */ /* #18181B */

  /* --- Lines --- */
  --border: 240 5.9% 90%;           /* @kind color */ /* #E4E4E7 borders, dividers */
  --input: 240 5.9% 90%;            /* @kind color */ /* #E4E4E7 */
  --ring: 211 100% 40%;             /* @kind color */ /* #0085E0 focus ring (blue) */

  /* --- Status --- */
  --destructive: 0 84.2% 60.2%;     /* @kind color */ /* #EF4444 errors, danger */
  --destructive-foreground: 0 0% 98%; /* @kind color */ /* #FAFAFA */
  --success: 142 76% 36%;           /* @kind color */ /* #16A34A confirmed/accepted */
  --success-foreground: 210 40% 98%; /* @kind color */ /* #F8FAFC */
  --warning: 45 93% 47%;            /* @kind color */ /* #EAB308 pending/draft */
  --warning-foreground: 210 40% 98%; /* @kind color */ /* #F8FAFC */

  /* --- Accent (gamification only) --- */
  --purple: 262 83% 58%;            /* @kind color */ /* #8B5CF6 */
  --purple-foreground: 210 40% 98%; /* @kind color */ /* #F8FAFC */
  --indigo: 239 84% 67%;            /* @kind color */ /* #6366F1 */
  --indigo-foreground: 210 40% 98%; /* @kind color */ /* #F8FAFC */

  /* --- Brand gradient (hero / FAB / marketing only — never a flat page bg) --- */
  --gradient-from: #667EEA;         /* @kind color */
  --gradient-to: #764BA2;           /* @kind color */
  --gradient-linkup: linear-gradient(135deg, #667EEA 0%, #764BA2 100%); /* @kind other */

  /* --- App-icon / onboarding brand blue (the LinkUp wordmark blue) --- */
  --brand-blue: #0094F5;            /* @kind color */
}

.dark {
  /* --- Surfaces & text (dark = true black for OLED) --- */
  --background: 0 0% 0%;            /* @kind color */ /* #000000 */
  --foreground: 210 40% 98%;        /* @kind color */ /* #F8FAFC */
  --card: 0 0% 7%;                  /* @kind color */ /* #121212 elevated surface */
  --card-foreground: 210 40% 98%;   /* @kind color */ /* #F8FAFC */
  --popover: 0 0% 7%;               /* @kind color */ /* #121212 */
  --popover-foreground: 210 40% 98%; /* @kind color */ /* #F8FAFC */

  /* --- Primary inverts to near-white --- */
  --primary: 0 0% 98%;              /* @kind color */ /* #FAFAFA */
  --primary-foreground: 0 0% 0%;    /* @kind color */ /* #000000 */

  /* --- Subtle fills & muted --- */
  --secondary: 0 0% 12%;            /* @kind color */ /* #1F1F1F */
  --secondary-foreground: 210 40% 98%; /* @kind color */ /* #F8FAFC */
  --muted: 0 0% 12%;                /* @kind color */ /* #1F1F1F */
  --muted-foreground: 215 20% 65%;  /* @kind color */ /* #94A3B8 */
  --accent: 0 0% 14%;               /* @kind color */ /* #242424 */
  --accent-foreground: 210 40% 98%; /* @kind color */ /* #F8FAFC */

  /* --- Lines --- */
  --border: 0 0% 18%;               /* @kind color */ /* #2E2E2E */
  --input: 0 0% 18%;                /* @kind color */ /* #2E2E2E */
  --ring: 211 100% 40%;             /* @kind color */ /* #0085E0 */

  /* --- Status (destructive darkens) --- */
  --destructive: 0 72% 42%;         /* @kind color */ /* #B91C1C */
  --destructive-foreground: 0 0% 98%; /* @kind color */ /* #FAFAFA */
}