/* Screenourish design tokens.
 * Foundations follow concept/design.md (Inter, 16/24 base, radius + motion scale, WCAG 2.2 AA);
 * colour is derived from the logo: lime #BCD444 and forest #284440.
 * Colours are stored as space-separated RGB triplets so Tailwind can apply opacity (bg-surface/50).
 * Components must use these semantic tokens, never raw hex values.
 */
:root {
  /* ---- brand (fixed across themes) ---- */
  --brand-lime: 188 212 68;          /* #BCD444 */
  --brand-lime-hover: 201 222 96;    /* lighter */
  --brand-lime-active: 169 192 50;   /* darker */
  --brand-forest: 40 68 64;          /* #284440 */
  --brand-forest-hover: 27 50 48;    /* #1B3230 */

  /* ---- typography ---- */
  --font-family-primary: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-family-mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;
  --font-size-xs: 12px;
  --font-size-sm: 14px;
  --font-size-md: 15px;
  --font-size-lg: 16px;   /* base */
  --font-size-xl: 18px;
  --font-size-2xl: 20px;
  --font-size-3xl: 40px;
  --font-size-4xl: 42px;
  --font-size-display: clamp(2.5rem, 1.4rem + 4.6vw, 4.75rem);   /* hero only */
  --font-weight-base: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-heavy: 800;   /* wordmark "SCREEN" */
  --font-weight-light: 300;   /* wordmark "OURISH" */
  --line-height-base: 24px;
  --line-height-tight: 1.1;

  /* ---- spacing (design.md micro-steps + a 4px-based scale) ---- */
  --space-1: 2px;
  --space-2: 3px;
  --space-3: 4px;
  --space-4: 8px;
  --space-5: 10px;
  --space-6: 11px;
  --space-7: 12px;
  --space-8: 14px;
  --space-9: 16px;
  --space-10: 24px;
  --space-11: 32px;
  --space-12: 48px;
  --space-13: 72px;
  --space-14: 112px;

  /* ---- radius ---- */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 15px;
  --radius-lg: 60px;
  --radius-xl: 100px;   /* pills: buttons, tabs, chips */

  /* ---- motion ---- */
  --motion-duration-instant: 100ms;
  --motion-duration-fast: 200ms;
  --motion-duration-normal: 600ms;
  --motion-ease: cubic-bezier(0.2, 0, 0, 1);

  /* ---- layout ---- */
  --container-max: 1200px;
  --header-height: 64px;
}

/* ================= light theme (default) ================= */
:root,
:root[data-theme="light"] {
  color-scheme: light;
  --surface-base: 255 255 255;
  --surface-raised: 255 255 255;
  --surface-subtle: 244 247 238;      /* faint lime tint */
  --surface-muted: 241 243 246;       /* design.md surface.strong */
  --surface-strong: 234 240 220;
  --surface-inverse: 40 68 64;        /* forest */
  --surface-overlay: 18 33 31;

  --text-primary: 18 33 31;
  --text-secondary: 68 82 79;
  --text-muted: 95 109 105;
  --text-inverse: 255 255 255;
  --text-on-brand: 40 68 64;          /* forest on lime */
  --text-link: 40 68 64;

  --border-default: 217 221 211;
  --border-strong: 150 164 158;

  --action-bg: 40 68 64;              /* primary button */
  --action-bg-hover: 27 50 48;
  --action-text: 255 255 255;
  --accent-bg: 188 212 68;            /* lime button */
  --accent-bg-hover: 201 222 96;
  --accent-bg-active: 169 192 50;
  --accent-text: 40 68 64;

  --focus-ring: 40 68 64;
  --state-success-text: 31 107 58;
  --state-success-bg: 232 245 236;
  --state-warning-text: 122 79 0;
  --state-warning-bg: 255 243 209;
  --state-danger-text: 179 38 30;
  --state-danger-bg: 253 236 234;
  --state-info-text: 40 68 64;
  --state-info-bg: 234 240 220;

  --shadow-overlay: 0 24px 60px -12px rgb(18 33 31 / 0.35);
}

/* ================= dark theme ================= */
:root[data-theme="dark"] {
  color-scheme: dark;
  --surface-base: 12 26 24;
  --surface-raised: 19 37 35;
  --surface-subtle: 16 32 30;
  --surface-muted: 27 48 45;
  --surface-strong: 36 60 56;
  --surface-inverse: 5 13 12;
  --surface-overlay: 5 13 12;

  --text-primary: 242 246 238;
  --text-secondary: 180 194 188;
  --text-muted: 141 160 153;
  --text-inverse: 255 255 255;
  --text-on-brand: 12 26 24;
  --text-link: 188 212 68;

  --border-default: 42 66 62;
  --border-strong: 92 118 112;

  --action-bg: 188 212 68;            /* lime is the primary action on dark */
  --action-bg-hover: 201 222 96;
  --action-text: 12 26 24;
  --accent-bg: 188 212 68;
  --accent-bg-hover: 201 222 96;
  --accent-bg-active: 169 192 50;
  --accent-text: 12 26 24;

  --focus-ring: 188 212 68;
  --state-success-text: 127 214 155;
  --state-success-bg: 20 46 34;
  --state-warning-text: 255 208 102;
  --state-warning-bg: 52 40 10;
  --state-danger-text: 255 138 128;
  --state-danger-bg: 58 22 20;
  --state-info-text: 188 212 68;
  --state-info-bg: 30 46 22;

  --shadow-overlay: 0 24px 60px -12px rgb(0 0 0 / 0.65);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-duration-instant: 0ms;
    --motion-duration-fast: 0ms;
    --motion-duration-normal: 0ms;
  }
}