/* Nuance design tokens — shared source of truth. Import this instead of copying values out of the guide HTML. */

:root {
  /* Core brand */
  --ink: #1d1d1d;
  --paper: #f1eedb;
  --purple: #5949a7;
  --purple-700: #463a83;
  --purple-100: #d5d1eb;

  /* Product surfaces (light) */
  --surface: #faf8f0;
  --surface-2: #e8e4d4;
  --line: #cfc9b5;
  --muted: #68655d;
  --brand-black-border: #4d4d4d;
  --focus: #5949a7;
  --link: #463a83;
  --link-hover: #5949a7;

  /* Supporting accents — official base + product Soft/Strong */
  --green: #00ad68;
  --green-soft: #b8e9d7;
  --green-strong: #006b40;
  --yellow: #f5ec5a;
  --yellow-soft: #fffbd2;
  --yellow-strong: #706700;
  --yellow-readable: var(--yellow-strong);
  --orange: #ffc550;
  --orange-soft: #ffe7b5;
  --orange-strong: #8a5700;
  --orange-readable: var(--orange-strong);
  --pink: #f58da2;
  --pink-soft: #ffd6de;
  --pink-strong: #9e2f4a;
  --blue: #5585d7;
  --blue-soft: #d4e2fa;
  --blue-strong: #244f9e;
  --turquoise: #9acdbf;
  --turquoise-soft: #d8efe8;
  --turquoise-strong: #2f6d5f;

  /* Semantic status — error/destructive resolved to Pink (Orange is already "warning") */
  --error: var(--pink);
  --error-soft: var(--pink-soft);
  --error-strong: var(--pink-strong);
  --error-readable: var(--pink-strong);
  --success-readable: var(--green-strong);

  /* Student portal */
  --portal-bg: #ffffff;
  --portal-text: #1d1d1d;
  --portal-muted: #6b6b63;
  --portal-border: #1d1d1d26;
  --portal-track: #e6e2cc;
  --portal-focus: #5949a7;

  /* Geometry */
  --card-radius: 16px;
  --button-radius: 8px;
  --pill-radius: 999px;
  /* Tile: the brand's own container shape from the logo guideline — a
     rectangle with one DIAGONAL PAIR of corners cut to a large quarter,
     alternating direction across a row. See docs/graphics.md. Not a card. */
  --tile-radius: 40px;
  --control-height-sm: 32px;
  --control-height: 44px;
  --control-height-lg: 48px;
  --touch-target: 44px;
  --density-comfortable: 1;
  --density-compact: .85;
  --shadow: 0 1px 0 rgba(29, 29, 29, .08);
  --shadow-raised: 0 8px 18px rgba(29, 29, 29, .18);
  --border-width: 1px;

  /* Space scale — 4px base */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 48px;

  /* Type */
  --font-sans: "Mona Sans Variable", "Mona Sans", Prompt, sans-serif;
  --font-thai: Prompt, sans-serif;
  --font-serif: "Instrument Serif", serif;
  --font-mono: "DM Mono", monospace;
  --font-size-display: clamp(48px, 7vw, 90px);
  --line-height-display: .98;
  --font-size-heading: 36px;
  --line-height-heading: 42px;
  --font-size-body: 16px;
  --line-height-body: 26px;

  /* Layout: compact ≤560px, medium ≤850px, expanded >850px. CSS custom
     properties cannot be used in media-query conditions, so those limits are
     also exported in tokens.json. */
  --content-max: 1280px;
  --page-gutter: clamp(20px, 5vw, 72px);

  /* Motion and layers */
  --motion-fast: 160ms;
  --motion-surface: 240ms;
  /* Easing. Durations say how long; these say what shape. Without them every
     project picks its own curve and the same 160ms fade feels different
     across Nuance properties. See docs/accessibility.md → Motion and layers. */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);   /* on-screen change: move, resize, reorder */
  --ease-enter: cubic-bezier(0, 0, 0, 1);        /* arriving: decelerate into place */
  --ease-exit: cubic-bezier(0.3, 0, 1, 1);       /* leaving: accelerate away */
  --z-base: 0;
  --z-sticky: 10;
  --z-dropdown: 20;
  --z-modal: 30;
  --z-toast: 40;
}

[data-theme="dark"] {
  --ink: #f1eedb;
  --paper: #1d1d1d;
  --surface: #292929;
  --surface-2: #383838;
  --line: #575757;
  --muted: #c7c2b0;
  --purple: #b5aedb;
  --purple-700: #d5d1eb;
  --purple-100: #463a83;
  --focus: #b5aedb;
  --link: #d5d1eb;
  --link-hover: #b5aedb;
  /* Semantic surfaces are deliberately darker in dark mode: the light Soft
     fills are category swatches, not dark-theme status backgrounds. */
  --green-soft: #123d2d;
  --green-strong: #74e0b0;
  --yellow-soft: #403b0d;
  --yellow-strong: #f6ed70;
  --orange-soft: #49320e;
  --orange-strong: #ffd17a;
  --pink-soft: #48202c;
  --pink-strong: #ffb4c1;
  --blue-soft: #1d345f;
  --blue-strong: #a9c7ff;
  --turquoise-soft: #1c3f37;
  --turquoise-strong: #aae1d1;
  --yellow-readable: var(--yellow);
  --orange-readable: var(--orange);
  --error-readable: var(--pink);
  --success-readable: var(--green);
  --brand-black-border: #666666;
  --portal-bg: #1d1d1d;
  --portal-text: #f1eedb;
  --portal-muted: #b3b3b3;
  --portal-border: #4d4d4d;
  --portal-track: #4d4d4d;
  --portal-focus: #b5aedb;
  --shadow: 0 1px 0 rgba(241, 238, 219, .13);
  --shadow-raised: 0 8px 18px rgba(0, 0, 0, .38);
}

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