/* ==========================================================================
   RecallRN design tokens
   Change the product's look from here. Components only reference tokens.
   ========================================================================== */

:root {
  /* Base palette — "clinical calm" */
  --paper: #F2F4F1;        /* app background, cool sage-white */
  --surface: #FFFFFF;      /* raised panels */
  --surface-2: #E9EDE8;    /* wells, inputs, tracks */
  --surface-3: #DDE3DC;
  --ink: #17302D;          /* deep spruce text */
  --ink-2: #4A5F5B;
  --ink-3: #7B8C88;
  --line: #DCE2DB;
  --line-strong: #C6CFC6;

  --scrub: #1E6B61;        /* primary — scrub green */
  --scrub-strong: #15544C;
  --scrub-soft: #DCEBE5;
  --scrub-ink: #FFFFFF;

  --amber: #D9952B;        /* streaks, attention, due */
  --amber-soft: #F8EBD3;
  --due: #E2692B;          /* due dates and deadlines: a true orange, apart from the quiz amber */
  --due-soft: #FAE3D5;
  --rose: #C8434F;         /* incorrect, critical values */
  --rose-soft: #F7E0E1;
  --good: #2E8A57;
  --good-soft: #DDF0E3;
  --sky: #3A7CA5;
  --sky-soft: #DDEAF3;

  /* Pro tier — understated brass, never loud */
  --pro: #9A6B1E;
  --pro-soft: #F3E8D2;

  /* Monitor strip (signature element) */
  --monitor: #0E2421;
  --monitor-2: #143330;
  --monitor-grid: rgba(124, 240, 197, .07);
  --trace: #7CF0C5;
  --trace-dim: rgba(124, 240, 197, .35);
  --monitor-ink: #E6F5EF;
  --monitor-ink-2: #8FB3A9;

  /* Course hues */
  --c-mat: #B9507A;   /* Maternal–Newborn */
  --c-pharm: #3A7CA5; /* Pharmacology */
  --c-med: #6B8A2C;   /* Adult Health / Med-Surg */
  --c-psych: #8460BE; /* Mental Health */
  /* Extra colors for courses students add */
  --c-teal: #2A8C86;
  --c-indigo: #5560C4;
  --c-gold: #A8801E;
  --c-rose: #C2475B;
  --c-slate: #5C717E;

  /* Typography */
  --font-display: "Schibsted Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "Atkinson Hyperlegible Mono", ui-monospace, "SF Mono", monospace;

  --fs-xs: .75rem;
  --fs-sm: .875rem;
  --fs-base: 1rem;
  --fs-md: 1.125rem;
  --fs-lg: 1.375rem;
  --fs-xl: 1.75rem;
  --fs-2xl: 2.25rem;
  --fs-3xl: 2.875rem;

  /* Spacing (4px base) */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px;
  --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px;

  /* Radii — vary by hierarchy, not one radius everywhere */
  --r-xs: 6px;    /* small chips inside dense UI */
  --r-sm: 10px;   /* inputs, buttons */
  --r-md: 14px;   /* list rows, small tiles */
  --r-lg: 20px;   /* panels */
  --r-xl: 28px;   /* hero / monitor */
  --r-pill: 999px;

  --shadow-1: 0 1px 0 rgba(23, 48, 45, .04), 0 1px 2px rgba(23, 48, 45, .06);
  --shadow-2: 0 2px 4px rgba(23, 48, 45, .05), 0 12px 32px -12px rgba(23, 48, 45, .18);
  --shadow-pop: 0 24px 64px -16px rgba(14, 36, 33, .35);

  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --t-fast: 140ms;
  --t-med: 240ms;

  --sidebar-w: 248px;
  --topbar-h: 64px;
  --content-max: 1240px;

  color-scheme: light;
}

/* Dark theme — tuned for late-night study, low glare */
:root[data-theme="dark"] {
  --paper: #0D1918;
  --surface: #13221F;
  --surface-2: #1A2D2A;
  --surface-3: #223834;
  --ink: #E2ECE8;
  --ink-2: #A6B8B3;
  --ink-3: #74898A;
  --line: #233733;
  --line-strong: #2F4743;

  --scrub: #5CBFAA;
  --scrub-strong: #7DD3C0;
  --scrub-soft: #183A34;
  --scrub-ink: #08201C;

  --amber: #E8AE50;
  --amber-soft: #3A2C14;
  --due: #F2884D;
  --due-soft: #41241A;
  --rose: #EB6E78;
  --rose-soft: #3D1D21;
  --good: #5CC08A;
  --good-soft: #173526;
  --sky: #6BAAD3;
  --sky-soft: #172D3B;

  --pro: #D9AE62;
  --pro-soft: #33281A;

  --monitor: #081311;
  --monitor-2: #0E1E1B;

  --c-mat: #DC7FA3;
  --c-pharm: #6BAAD3;
  --c-med: #A2C25E;
  --c-psych: #AE8DE3;
  --c-teal: #6CCFC7;
  --c-indigo: #9AA1F2;
  --c-gold: #DDB65A;
  --c-rose: #EB7F8E;
  --c-slate: #A1B4C0;

  --shadow-1: 0 1px 0 rgba(0,0,0,.2);
  --shadow-2: 0 2px 4px rgba(0,0,0,.2), 0 12px 32px -12px rgba(0,0,0,.5);
  --shadow-pop: 0 24px 64px -16px rgba(0,0,0,.7);
  color-scheme: dark;
}