/* Nursing Ready — design tokens
 *
 * Clinical-neutral system, 2026-08 revision. The brand pine (#0F766E) and
 * coral accent carry over from the app so the site and the product stay
 * recognisably the same thing; the surfaces are clean neutrals with a
 * slight green cast instead of the earlier cream paper. Components
 * reference the SEMANTIC name (--ink, --hairline, --brand), never a raw
 * hex, or they hardcode a light-mode decision dark mode then has to fight.
 *
 * Colours are declared twice: as RGB channels (for alpha composition via
 * rgb(var(--rgb-brand) / .16)) and as ready-to-use hex-ish values.
 */

:root {
  color-scheme: light;

  /* ---- Surfaces: clean neutrals, lightest to deepest inset ---- */
  --rgb-canvas: 249 250 249;
  --rgb-surface: 255 255 255;
  --rgb-raised: 255 255 255;
  --rgb-sunken: 238 242 240;

  /* ---- Ink ramp: primary text down to ghost ---- */
  --rgb-ink: 20 28 26;
  --rgb-ink-soft: 71 85 80;
  --rgb-ink-faint: 105 118 112;
  --rgb-ink-ghost: 148 158 153;
  --rgb-ink-inverse: 250 251 250;

  /* ---- Lines ---- */
  --rgb-hairline: 226 232 229;
  --rgb-hairline-strong: 199 208 204;

  /* ---- Brand: pine ---- */
  --rgb-brand: 15 118 110;
  --rgb-brand-strong: 12 93 87;
  --rgb-brand-edge: 11 59 54;
  --rgb-brand-soft: 232 243 240;
  --rgb-brand-line: 18 161 146;
  --rgb-brand-tint: 209 232 226;
  --rgb-brand-tint-strong: 164 214 202;

  /* ---- Status ---- */
  --rgb-success: 23 143 114;
  --rgb-danger: 220 90 65;
  --rgb-danger-edge: 178 58 36;
  /* Darker than --gold on purpose: warning carries status TEXT, and the
     bright XP gold only reaches ~2.3:1 on light surfaces. */
  --rgb-warning: 176 118 26;
  --rgb-info: 78 128 184;

  /* ---- Accents ---- */
  --rgb-accent: 240 104 90;
  --rgb-accent-soft: 253 237 233;
  --rgb-gold: 222 155 45;
  --rgb-gold-soft: 250 240 220;
  --rgb-violet: 124 58 237;
  --rgb-violet-soft: 241 234 251;

  /* ---- Named colours ---- */
  --canvas: rgb(var(--rgb-canvas));
  --surface: rgb(var(--rgb-surface));
  --raised: rgb(var(--rgb-raised));
  --sunken: rgb(var(--rgb-sunken));
  --ink: rgb(var(--rgb-ink));
  --ink-soft: rgb(var(--rgb-ink-soft));
  --ink-faint: rgb(var(--rgb-ink-faint));
  --ink-ghost: rgb(var(--rgb-ink-ghost));
  --ink-inverse: rgb(var(--rgb-ink-inverse));
  --hairline: rgb(var(--rgb-hairline));
  --hairline-strong: rgb(var(--rgb-hairline-strong));
  --brand: rgb(var(--rgb-brand));
  --brand-strong: rgb(var(--rgb-brand-strong));
  --brand-edge: rgb(var(--rgb-brand-edge));
  --brand-soft: rgb(var(--rgb-brand-soft));
  --brand-line: rgb(var(--rgb-brand-line));
  --brand-tint: rgb(var(--rgb-brand-tint));
  --brand-tint-strong: rgb(var(--rgb-brand-tint-strong));
  --success: rgb(var(--rgb-success));
  --danger: rgb(var(--rgb-danger));
  --danger-edge: rgb(var(--rgb-danger-edge));
  --warning: rgb(var(--rgb-warning));
  --info: rgb(var(--rgb-info));
  --accent: rgb(var(--rgb-accent));
  --accent-soft: rgb(var(--rgb-accent-soft));
  --gold: rgb(var(--rgb-gold));
  --gold-soft: rgb(var(--rgb-gold-soft));
  --violet: rgb(var(--rgb-violet));
  --violet-soft: rgb(var(--rgb-violet-soft));

  /* ---- Gradients (scheme-fixed — the brand moment) ---- */
  --grad-hero: linear-gradient(135deg, #12a192 0%, #0b3b36 100%);
  --grad-brand: linear-gradient(135deg, #0f766e 0%, #12a192 100%);
  --grad-paper: linear-gradient(180deg, #ffffff 0%, #f1f5f3 100%);
  --grad-coral: linear-gradient(135deg, #f58a7b 0%, #d9503f 100%);

  /* ---- Radii ---- */
  --r-sm: 5px;
  --r-md: 8px;
  --r-lg: 10px;
  --r-xl: 14px;
  --r-2xl: 16px;
  --r-3xl: 20px;
  --r-pill: 999px;

  /* ---- Elevation: cool-ink depth, kept quiet ---- */
  --shadow-rgb: 15 23 21;
  --sh-hairline: 0 0 0 1px rgb(var(--shadow-rgb) / 0.07);
  --sh-card: 0 0 0 1px rgb(var(--shadow-rgb) / 0.05),
    0 1px 3px rgb(var(--shadow-rgb) / 0.06);
  --sh-elev: 0 0 0 1px rgb(var(--shadow-rgb) / 0.05),
    0 4px 14px rgb(var(--shadow-rgb) / 0.08);
  --sh-float: 0 0 0 1px rgb(var(--shadow-rgb) / 0.06),
    0 16px 36px rgb(var(--shadow-rgb) / 0.12),
    0 3px 8px rgb(var(--shadow-rgb) / 0.05);
  --sh-glow: 0 0 0 4px rgb(var(--rgb-brand) / 0.16);
  --sh-glow-coral: 0 0 0 4px rgb(var(--rgb-accent) / 0.18);

  /* ---- Type ---- */
  --font-display: 'Bricolage Grotesque', 'Avenir Next', 'Segoe UI',
    system-ui, sans-serif;
  --font-ui: 'Instrument Sans', system-ui, -apple-system, BlinkMacSystemFont,
    'Segoe UI', sans-serif;
  /* Numbers and small labels set in the UI face with tabular figures;
     --font-code is for actual code spans only. */
  --font-mono: 'Instrument Sans', system-ui, -apple-system, sans-serif;
  --font-code: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* ---- Motion: a design token like colour is ---- */
  --e-out: cubic-bezier(0.215, 0.61, 0.355, 1);
  --e-in: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  --e-pop: cubic-bezier(0.34, 1.56, 0.64, 1);
  --d-instant: 80ms;
  --d-fast: 160ms;
  --d-normal: 220ms;
  --d-slow: 320ms;
  --d-deliberate: 480ms;

  /* ---- Layout ---- */
  --w-page: 1120px;
  --w-content: 880px;
  --w-prose: 720px;
  --w-narrow: 560px;
  --gutter: 20px;
}

/* Dark — neutral near-black with the same slight green cast, so the flip
   reads as the same product with the lights off. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    color-scheme: dark;

    --rgb-canvas: 14 17 16;
    --rgb-surface: 21 26 24;
    --rgb-raised: 28 34 32;
    --rgb-sunken: 9 12 11;

    --rgb-ink: 235 241 238;
    --rgb-ink-soft: 178 190 185;
    --rgb-ink-faint: 138 150 144;
    --rgb-ink-ghost: 100 111 106;
    --rgb-ink-inverse: 14 17 16;

    --rgb-hairline: 44 52 49;
    --rgb-hairline-strong: 64 74 70;

    /* Pine lifts toward primary-500 so it clears 4.5:1 on near-black */
    --rgb-brand: 18 161 146;
    --rgb-brand-strong: 45 212 191;
    --rgb-brand-edge: 11 59 54;
    --rgb-brand-soft: 19 45 41;
    --rgb-brand-line: 45 212 191;
    --rgb-brand-tint: 23 60 55;
    --rgb-brand-tint-strong: 30 84 77;

    --rgb-success: 47 169 138;
    --rgb-danger: 232 115 92;
    --rgb-danger-edge: 150 52 36;
    --rgb-warning: 232 172 74;
    --rgb-info: 110 158 214;

    --rgb-accent: 245 138 123;
    --rgb-accent-soft: 54 31 27;
    --rgb-gold: 232 172 74;
    --rgb-gold-soft: 46 36 16;
    --rgb-violet: 167 139 250;
    --rgb-violet-soft: 40 32 64;

    --grad-paper: linear-gradient(180deg, #151a18 0%, #0e1110 100%);

    --shadow-rgb: 0 0 0;
    --sh-card: 0 0 0 1px rgb(255 255 255 / 0.05),
      0 2px 6px rgb(0 0 0 / 0.32);
    --sh-elev: 0 0 0 1px rgb(255 255 255 / 0.05),
      0 6px 20px rgb(0 0 0 / 0.42);
    --sh-float: 0 0 0 1px rgb(255 255 255 / 0.06),
      0 20px 44px rgb(0 0 0 / 0.58), 0 4px 10px rgb(0 0 0 / 0.3);
  }
}

/* Explicit opt-in (the header toggle stamps this on <html>) */
:root[data-theme='dark'] {
  color-scheme: dark;

  --rgb-canvas: 14 17 16;
  --rgb-surface: 21 26 24;
  --rgb-raised: 28 34 32;
  --rgb-sunken: 9 12 11;

  --rgb-ink: 235 241 238;
  --rgb-ink-soft: 178 190 185;
  --rgb-ink-faint: 138 150 144;
  --rgb-ink-ghost: 100 111 106;
  --rgb-ink-inverse: 14 17 16;

  --rgb-hairline: 44 52 49;
  --rgb-hairline-strong: 64 74 70;

  --rgb-brand: 18 161 146;
  --rgb-brand-strong: 45 212 191;
  --rgb-brand-edge: 11 59 54;
  --rgb-brand-soft: 19 45 41;
  --rgb-brand-line: 45 212 191;
  --rgb-brand-tint: 23 60 55;
  --rgb-brand-tint-strong: 30 84 77;

  --rgb-success: 47 169 138;
  --rgb-danger: 232 115 92;
  --rgb-danger-edge: 150 52 36;
  --rgb-warning: 232 172 74;
  --rgb-info: 110 158 214;

  --rgb-accent: 245 138 123;
  --rgb-accent-soft: 54 31 27;
  --rgb-gold: 232 172 74;
  --rgb-gold-soft: 46 36 16;
  --rgb-violet: 167 139 250;
  --rgb-violet-soft: 40 32 64;

  --grad-paper: linear-gradient(180deg, #151a18 0%, #0e1110 100%);

  --shadow-rgb: 0 0 0;
  --sh-card: 0 0 0 1px rgb(255 255 255 / 0.05), 0 2px 6px rgb(0 0 0 / 0.32);
  --sh-elev: 0 0 0 1px rgb(255 255 255 / 0.05), 0 6px 20px rgb(0 0 0 / 0.42);
  --sh-float: 0 0 0 1px rgb(255 255 255 / 0.06), 0 20px 44px rgb(0 0 0 / 0.58),
    0 4px 10px rgb(0 0 0 / 0.3);
}