/* ─── APOLLO DESIGN SYSTEM — TOKENS ────────────────────────────────────────
   Authoritative token list for the Apollo replica DS. Mirrors the live
   Apollo app at apollo.apisett.com (a stock React + Tailwind + shadcn/ui
   build) and is independent from Cosmo's DS — Apollo uses HSL triplets,
   the system font stack, and shadcn naming conventions.

   USAGE NOTE — HSL triplets
   Color tokens hold the THREE numeric channels of an HSL color
   (hue saturation lightness), without `hsl(...)` wrapping. This is the
   shadcn convention; it lets components compose color + alpha in CSS
   without preprocessing:
       color: hsl(var(--primary));                   // solid
       background: hsl(var(--primary) / 0.15);       // 15% alpha
       border: 1px solid hsl(var(--border));
   ─────────────────────────────────────────────────────────────────────── */

:root {

  /* ─── COLOR — semantic accent roles ────────────────────────────────────
     Every role pairs with a `*-foreground` for legible text on top of it.
   ────────────────────────────────────────────────────────────────────── */

  --primary:               238 70% 60%;    /* indigo — active nav, send button, primary CTAs */
  --primary-foreground:    0 0% 100%;      /* white text on primary */
  --primary-glow:          238 80% 70%;    /* lighter indigo for hover/highlight states */

  --accent:                210 100% 60%;   /* bright blue — secondary highlight; rarely used standalone */
  --accent-foreground:     0 0% 100%;

  --success:               142 71% 45%;    /* green — success/active indicator */
  --success-foreground:    0 0% 100%;

  --warning:               38 92% 50%;     /* amber — pending / waiting indicator */
  --warning-foreground:    0 0% 100%;

  --destructive:           0 72% 51%;      /* red — failed / destructive action */
  --destructive-foreground: 0 0% 100%;


  /* ─── SURFACE — backgrounds, text, borders ─────────────────────────────
     These define the chrome of the app. Every surface has a foreground
     pair so text always has a guaranteed-legible color.
   ────────────────────────────────────────────────────────────────────── */

  --background:            240 20% 99%;    /* near-white app background, slight cool tint */
  --foreground:            240 10% 10%;    /* near-black body text */

  --card:                  0 0% 100%;      /* pure white card surface */
  --card-foreground:       240 10% 10%;

  --popover:               0 0% 100%;      /* same as card; reserved for floating menus */
  --popover-foreground:    240 10% 10%;

  --secondary:             240 5% 96%;     /* very light gray — secondary buttons, user chat bubble */
  --secondary-foreground:  240 10% 20%;

  --muted:                 240 5% 96%;     /* same gray as secondary, used for subtle fills */
  --muted-foreground:      240 4% 46%;     /* mid-gray for secondary/help text */

  --border:                240 6% 90%;     /* default 1px border on cards, inputs, dividers */
  --input:                 240 6% 90%;     /* same as border; semantic alias for form fields */
  --ring:                  238 70% 60%;    /* focus ring (matches primary) */


  /* ─── TYPOGRAPHY — font stacks + scale ─────────────────────────────────
     Apollo uses the platform system fonts — no webfont. The scale below
     mirrors the Tailwind defaults that the snapshot actually exercises.
   ────────────────────────────────────────────────────────────────────── */

  --font-sans:
    ui-sans-serif, system-ui, 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;

  /* Scale — observed sizes in the snapshot */
  --text-xs:    0.75rem;    /* 12px — meta, labels, status pills */
  --text-sm:    0.875rem;   /* 14px — default UI body text */
  --text-base:  1rem;       /* 16px — chat body, prose */
  --text-lg:    1.125rem;   /* 18px — section headings */
  --text-xl:    1.25rem;    /* 20px — page title (rare) */
  --text-2xl:   1.5rem;     /* 24px — Create Task heading */
  --text-3xl:   1.875rem;   /* 30px — Weekly Goals heading */

  /* Line-heights paired with scale (Tailwind defaults) */
  --leading-tight:  1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;

  /* Weights used in the snapshot */
  --weight-normal:    400;
  --weight-medium:    500;
  --weight-semibold:  600;
  --weight-bold:      700;


  /* ─── SPACING — Tailwind default 4px scale ─────────────────────────────
     Every utility used in the snapshot resolves to one of these.
     Use them inline where it helps; Tailwind class-derived spacing
     stays embedded in components.css for fidelity.
   ────────────────────────────────────────────────────────────────────── */

  --space-0:   0;
  --space-1:   0.25rem;   /* 4px */
  --space-1-5: 0.375rem;  /* 6px */
  --space-2:   0.5rem;    /* 8px */
  --space-3:   0.75rem;   /* 12px */
  --space-4:   1rem;      /* 16px */
  --space-5:   1.25rem;   /* 20px */
  --space-6:   1.5rem;    /* 24px */
  --space-8:   2rem;      /* 32px */
  --space-10:  2.5rem;    /* 40px */


  /* ─── RADIUS — shadcn "lg" base; sm/md derived ─────────────────────────
     Apollo sets `--radius: .75rem` on the root and shadcn components
     compute their corner sizes off it via calc(). Mirroring that here.
   ────────────────────────────────────────────────────────────────────── */

  --radius:     0.75rem;                    /* 12px — cards, large surfaces */
  --radius-md:  calc(var(--radius) - 2px);  /* 10px — buttons, inputs (`rounded-md`) */
  --radius-sm:  calc(var(--radius) - 4px);  /* 8px  — tab triggers (`rounded-sm`) */
  --radius-xs:  0.25rem;                    /* 4px  — small chips, code inline */
  --radius-full: 9999px;                    /* full pill — status pills, avatar */


  /* ─── SHADOW — subtle elevation, ink-tinted ────────────────────────────
     Same hue as foreground (240 10% 10%) so shadows feel coherent on
     the cool-tinted background. Captured directly from Apollo.
   ────────────────────────────────────────────────────────────────────── */

  --shadow-sm:  0 1px 2px 0 hsl(240 10% 10% / 0.05);
  --shadow-md:  0 4px 6px -1px hsl(240 10% 10% / 0.10);
  --shadow-lg:  0 10px 15px -3px hsl(240 10% 10% / 0.10);
  --shadow-xl:  0 20px 25px -5px hsl(240 10% 10% / 0.10);


  /* ─── MOTION — short, predictable easings ──────────────────────────────
     The snapshot uses `transition-colors`, `transition-all`,
     `duration-200`. These tokens centralize that.
   ────────────────────────────────────────────────────────────────────── */

  --duration-fast:  150ms;
  --duration-base:  200ms;
  --ease-out:       cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:    cubic-bezier(0.4, 0, 0.2, 1);
}