:root {
  color-scheme: light;

  /* Brand ramps from ULA Colour System v2. */
  --ula-blue-50: #f1fbff;
  --ula-blue-100: #daf3ff;
  --ula-blue-200: #a4e3fd;
  --ula-blue-300: #4fcdfa;
  --ula-blue-400: #23add9;
  --ula-blue-500: #0094bd;
  --ula-blue-600: #007fa2;
  --ula-blue-700: #007090;

  --ula-purple-50: #faf8ff;
  --ula-purple-100: #f2ecfe;
  --ula-purple-200: #e0d4fc;
  --ula-purple-300: #c8b0f8;
  --ula-purple-400: #a97ff0;
  --ula-purple-500: #9d73e3;
  --ula-purple-600: #895ecc;
  --ula-purple-700: #7c50bd;

  --ula-green-50: #effdef;
  --ula-green-100: #d6f8d5;
  --ula-green-200: #8ceb8c;
  --ula-green-300: #72d073;
  --ula-green-400: #56b458;
  --ula-green-500: #3c9b40;
  --ula-green-600: #23862a;
  --ula-green-700: #0a781a;

  --ula-red-50: #fff7f6;
  --ula-red-100: #ffeae8;
  --ula-red-200: #ffcec8;
  --ula-red-300: #ff9490;
  --ula-red-400: #fa7268;
  --ula-red-500: #e35e55;
  --ula-red-600: #cb4841;
  --ula-red-700: #bb3834;

  --ula-orange-50: #fff8f1;
  --ula-orange-100: #fff0d7;
  --ula-orange-200: #ffd2a0;
  --ula-orange-300: #fcb65e;
  --ula-orange-400: #d69237;
  --ula-orange-500: #bd7a14;
  --ula-orange-600: #a46800;
  --ula-orange-700: #915c00;

  --ula-yellow-50: #fff9e9;
  --ula-yellow-100: #feeebf;
  --ula-yellow-200: #fcd966;
  --ula-yellow-300: #dbb943;
  --ula-yellow-400: #bf9d1b;
  --ula-yellow-500: #a48600;
  --ula-yellow-600: #8d7200;
  --ula-yellow-700: #7e6500;

  --ula-neutral-0: #ffffff;
  --ula-neutral-50: #f9f9f9;
  --ula-neutral-100: #eeeeee;
  --ula-neutral-200: #d9d9d9;
  --ula-neutral-300: #bcbcbc;
  --ula-neutral-400: #a0a0a0;
  --ula-neutral-500: #888989;
  --ula-neutral-600: #757575;
  --ula-neutral-700: #5d5d5d;
  --ula-neutral-800: #343232;
  --ula-neutral-900: #1f1d1c;
  --ula-ink: #000000;
  --ula-paper: #f1edeb;

  /* Semantic colour roles. */
  --color-canvas: var(--ula-paper);
  --color-surface: var(--ula-neutral-0);
  --color-surface-subtle: var(--ula-neutral-50);
  --color-surface-raised: var(--ula-neutral-0);
  --color-text: var(--ula-neutral-900);
  --color-text-muted: var(--ula-neutral-700);
  --color-text-inverse: var(--ula-neutral-0);
  --color-border: var(--ula-neutral-200);
  --color-border-control: var(--ula-neutral-600);
  --color-border-strong: var(--ula-neutral-800);
  --color-primary: var(--ula-blue-600);
  --color-primary-hover: var(--ula-blue-700);
  --color-primary-subtle: var(--ula-blue-50);
  --color-accent: var(--ula-purple-600);
  --color-focus: var(--ula-blue-700);
  --color-info: var(--ula-blue-700);
  --color-info-surface: var(--ula-blue-50);
  --color-success: var(--ula-green-700);
  --color-success-surface: var(--ula-green-50);
  --color-warning: var(--ula-orange-700);
  --color-warning-fill: var(--ula-orange-300);
  --color-warning-surface: var(--ula-orange-50);
  --color-error: var(--ula-red-700);
  --color-error-surface: var(--ula-red-50);
  --color-highlight-fill: var(--ula-yellow-200);
  --color-highlight-ink: var(--ula-neutral-900);

  /* Product identity. Shared blue remains the action colour. */
  --product-accent: var(--ula-blue-600);
  --product-accent-soft: var(--ula-blue-50);
  --product-accent-strong: var(--ula-blue-700);
  --product-gradient-from: var(--ula-blue-300);
  --product-gradient-to: var(--ula-purple-400);
  --product-gradient-text-from: var(--ula-blue-700);
  --product-gradient-text-to: var(--ula-purple-700);

  /* Four-point spacing scale. */
  --space-0: 0;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* Shape and border scales. */
  --radius-none: 0;
  --radius-sm: 0.375rem;
  --radius-md: 0.625rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
  --radius-pill: 999px;
  --border-hairline: 1px;
  --border-control: 1px;
  --border-selected: 2px;
  --border-emphasis: 3px;

  /* Shadows and elevation. */
  --shadow-none: none;
  --shadow-xs: 0 1px 2px rgb(31 29 28 / 0.08);
  --shadow-sm: 0 2px 6px rgb(31 29 28 / 0.1);
  --shadow-md: 0 8px 24px rgb(31 29 28 / 0.12);
  --shadow-lg: 0 18px 48px rgb(31 29 28 / 0.16);
  --shadow-focus: 0 0 0 3px rgb(79 205 250 / 0.45);
  --elevation-0-shadow: var(--shadow-none);
  --elevation-1-shadow: var(--shadow-xs);
  --elevation-2-shadow: var(--shadow-sm);
  --elevation-3-shadow: var(--shadow-md);
  --elevation-4-shadow: var(--shadow-lg);
  --z-base: 0;
  --z-sticky: 20;
  --z-dropdown: 40;
  --z-overlay: 60;
  --z-modal: 80;
  --z-toast: 100;

  /* Typography. */
  --font-family-brand: "Ula R Spectac", ui-rounded, system-ui, sans-serif;
  --font-family-ui: Inter, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-family-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;
  --text-display-xl: clamp(3rem, 7vw, 5rem);
  --text-display-lg: clamp(2.5rem, 5vw, 4rem);
  --text-heading-xl: clamp(2rem, 3.5vw, 3rem);
  --text-heading-lg: 2rem;
  --text-heading-md: 1.5rem;
  --text-heading-sm: 1.25rem;
  --text-body-lg: 1.125rem;
  --text-body-md: 1rem;
  --text-body-sm: 0.875rem;
  --text-label: 0.9375rem;
  --text-caption: 0.8125rem;
  --leading-display: 1.02;
  --leading-heading: 1.2;
  --leading-body: 1.55;
  --leading-tight: 1.3;
  --tracking-display: -0.025em;
  --tracking-heading: -0.015em;
  --tracking-label: 0.01em;

  /* Layout and responsive limits. */
  --content-reading: 42rem;
  --content-standard: 72rem;
  --content-wide: 90rem;
  --sidebar-width: 17rem;
  --touch-target: 2.75rem;

  /* Motion. */
  --duration-instant: 80ms;
  --duration-fast: 120ms;
  --duration-standard: 180ms;
  --duration-deliberate: 240ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-enter: cubic-bezier(0, 0, 0.2, 1);
  --ease-exit: cubic-bezier(0.4, 0, 1, 1);
}

/* ── Product identity ─────────────────────────────────────────────────────
   Three products, one mark. The wordmark carries a two-stop gradient; the
   ULA lettering stays neutral so the family reads before the product does.

   --product-gradient is display only. Anything that has to be read uses
   --product-accent (fills) or --product-accent-strong (text), both of which
   clear AA on paper. See tests/validate-design-system.mjs.
   ───────────────────────────────────────────────────────────────────────── */

[data-product="studio"] {
  --product-accent: var(--ula-orange-600);
  --product-accent-soft: var(--ula-orange-50);
  --product-accent-strong: var(--ula-orange-700);
  --product-gradient-from: var(--ula-yellow-200);
  --product-gradient-to: var(--ula-orange-300);
  --product-gradient-text-from: var(--ula-yellow-700);
  --product-gradient-text-to: var(--ula-orange-700);
}

[data-product="check"] {
  --product-accent: var(--ula-green-600);
  --product-accent-soft: var(--ula-green-50);
  --product-accent-strong: var(--ula-green-700);
  --product-gradient-from: var(--ula-green-200);
  --product-gradient-to: var(--ula-blue-300);
  --product-gradient-text-from: var(--ula-green-700);
  --product-gradient-text-to: var(--ula-blue-700);
}

/* "Spec" is the name on the lockup and in tokens; the demo specs call the
   same product "Decide". Both selectors resolve to one palette so neither
   name breaks until one is retired. */
[data-product="spec"],
[data-product="decide"] {
  --product-accent: var(--ula-purple-600);
  --product-accent-soft: var(--ula-purple-50);
  --product-accent-strong: var(--ula-purple-700);
  --product-gradient-from: var(--ula-purple-400);
  --product-gradient-to: var(--ula-red-400);
  --product-gradient-text-from: var(--ula-purple-700);
  --product-gradient-text-to: var(--ula-red-700);
}

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