/* ==========================================================================
   Colors — Primitives + semantics + gradients
   Source of truth: Figma — Visual Exploration 2
   https://www.figma.com/design/8BlAmd7ZfXyJXjnB5nzOGn/Visual-Exploration-2
   Primitives + semantic colour variables (Dark mode); gradient color styles.
   ========================================================================== */

:root {
  /* ======================================================================
     PRIMITIVE COLORS (Figma collection: Primitives)
     ====================================================================== */

  /* Primitives are space-separated RGB triplets so the Tailwind preset can
     wrap them as `rgb(var(--X) / <alpha-value>)` and enable opacity modifiers
     like `bg-ds-pink-500/60`. Direct CSS consumers must wrap in `rgb(...)`. */

  --ds-color-black: 0 0 0;
  --ds-color-white: 255 255 255;

  --ds-color-gray-50: 245 244 242;
  --ds-color-gray-100: 237 236 234;
  --ds-color-gray-150: 232 231 229;
  --ds-color-gray-200: 219 218 216;
  --ds-color-gray-400: 114 113 112;
  --ds-color-gray-450: 137 136 136;
  --ds-color-gray-500: 170 170 170;
  --ds-color-gray-700: 53 53 54;
  --ds-color-gray-750: 46 46 46;
  --ds-color-gray-800: 36 36 36;
  --ds-color-gray-850: 29 29 29;
  --ds-color-gray-900: 18 18 18;
  --ds-color-gray-950: 13 13 13;

  --ds-color-pink-50: 253 240 247;
  --ds-color-pink-100: 252 222 237;
  --ds-color-pink-200: 249 196 222;
  --ds-color-pink-300: 245 163 204;
  --ds-color-pink-400: 241 123 182;
  --ds-color-pink-500: 236 72 153;
  --ds-color-pink-600: 203 62 132;
  --ds-color-pink-700: 170 52 110;
  --ds-color-pink-800: 137 42 89;
  --ds-color-pink-900: 106 32 69;

  /* Semantic token in Figma (marketing / legacy brand accent) */
  --ds-color-brand-pink: 253 95 194;

  --ds-color-success-50: 217 255 230;
  --ds-color-success-100: 172 252 199;
  --ds-color-success-300: 73 229 125;
  --ds-color-success-400: 30 212 90;
  --ds-color-success-600: 0 150 50;
  --ds-color-success-700: 0 69 23;

  --ds-color-error-50: 254 236 236;
  --ds-color-error-100: 254 213 213;
  --ds-color-error-300: 255 140 140;
  --ds-color-error-400: 255 99 99;
  --ds-color-error-500: 176 12 12;
  --ds-color-error-700: 115 3 3;

  --ds-color-caution-50: 254 244 230;
  --ds-color-caution-100: 255 212 156;
  --ds-color-caution-300: 255 169 56;
  --ds-color-caution-500: 212 120 0;
  --ds-color-caution-600: 156 88 0;
  --ds-color-caution-700: 102 58 0;

  --ds-color-info-50: 234 242 254;
  --ds-color-info-100: 201 222 254;
  --ds-color-info-300: 158 197 255;
  --ds-color-info-400: 79 149 255;
  --ds-color-info-500: 26 117 255;
  --ds-color-info-700: 0 84 209;

  /* Overlays (Figma semantic colours — extracted as primitives for reuse) */
  --ds-color-overlay-black-faint: rgba(0, 0, 0, 0.1);
  --ds-color-overlay-black-muted: rgba(0, 0, 0, 0.2);
  --ds-color-overlay-black-subtle: rgba(0, 0, 0, 0.3);
  --ds-color-overlay-black-default: rgba(0, 0, 0, 0.6);
  --ds-color-overlay-black-strong: rgba(0, 0, 0, 0.8);
  --ds-color-overlay-white-faintest: rgba(255, 255, 255, 0.05);
  --ds-color-overlay-white-faint: rgba(255, 255, 255, 0.1);
  --ds-color-overlay-white-muted: rgba(255, 255, 255, 0.2);
  --ds-color-overlay-white-subtle: rgba(255, 255, 255, 0.3);
  --ds-color-overlay-white-default: rgba(255, 255, 255, 0.6);
  --ds-color-overlay-white-strong: rgba(255, 255, 255, 0.8);

  /* Tap / hairline helpers (not separate Figma variables; derived for UI parity) */
  --ds-color-hairline-on-dark: rgba(255, 255, 255, 0.1);
  --ds-color-press-on-dark: rgba(255, 255, 255, 0.08);
  --ds-color-press-on-dark-strong: rgba(255, 255, 255, 0.12);

  /* ======================================================================
     GRADIENTS (Figma local color styles)
     ====================================================================== */

  /* Style: --ds-color-accent-surface-gradient */
  --ds-gradient-accent-surface: linear-gradient(0deg, #ff1cac 0%, #fd5fc2 50%, #ff79d1 100%);

  /* Subtle accent surface wash (sticker/voice tile backgrounds): multi-stop
     radial pink glow anchored top-left over gray-850. */
  --ds-gradient-accent-surface-subtle:
    radial-gradient(
      120% 140% at 0% 0%,
      rgb(253 95 194 / 0.4) 0%,
      rgb(197 79 153 / 0.22) 25%,
      rgb(141 62 112 / 0.12) 50%,
      rgb(85 46 70 / 0.06) 75%,
      rgb(29 29 29 / 0) 100%
    ),
    rgb(var(--ds-color-gray-850));

  /* Orange counterpart of accent-surface (crypto payment CTA) */
  --ds-gradient-accent-orange-surface: linear-gradient(0deg, #c6570a 0%, #f97316 50%, #ffa465 100%);

  /* Selected-card pink wash (coin pack selection) */
  --ds-gradient-selected-pink-surface-image: linear-gradient(
    180deg,
    rgb(var(--ds-color-brand-pink) / 0.09) 0%,
    rgb(var(--ds-color-brand-pink) / 0.3) 100%
  );
  /* Style: --ds-color-border-gradient */
  --ds-gradient-border-brand: linear-gradient(
    180deg,
    #ec4899 0%,
    rgba(253, 77, 188, 0) 87.23%,
    rgba(254, 152, 219, 0.6) 100%
  );

  /* Style: --ds-color-surface-overlay */
  --ds-gradient-surface-overlay: linear-gradient(180deg, #454546 0%, #3f3f3f 100%);

  /* Style: image-scrim (multi-stop; also in effects layer for blur pairing) */
  --ds-gradient-image-scrim: linear-gradient(
    0deg,
    rgba(0, 0, 0, 0.6) 0%,
    rgba(0, 0, 0, 0.595) 4.625%,
    rgba(0, 0, 0, 0.579) 9.25%,
    rgba(0, 0, 0, 0.551) 13.875%,
    rgba(0, 0, 0, 0.512) 18.5%,
    rgba(0, 0, 0, 0.461) 23.125%,
    rgba(0, 0, 0, 0.401) 27.75%,
    rgba(0, 0, 0, 0.334) 32.375%,
    rgba(0, 0, 0, 0.266) 37%,
    rgba(0, 0, 0, 0.199) 41.625%,
    rgba(0, 0, 0, 0.139) 46.25%,
    rgba(0, 0, 0, 0.088) 50.875%,
    rgba(0, 0, 0, 0.049) 55.5%,
    rgba(0, 0, 0, 0.021) 60.125%,
    rgba(0, 0, 0, 0.005) 64.75%,
    rgba(0, 0, 0, 0) 69.375%
  );

  /* Legacy aliases (same as new tokens; keep existing semantic references stable) */
  --ds-gradient-pink-cta: var(--ds-gradient-accent-surface);
  --ds-gradient-surface: var(--ds-gradient-surface-overlay);

  /* Card scrim: no separate Figma style — use image-scrim */
  --ds-gradient-card-scrim: var(--ds-gradient-image-scrim);

  --ds-gradient-radial-pink-surface-image: radial-gradient(
    120% 130% at 0% 0%,
    rgb(var(--ds-color-brand-pink) / 0.2) 0%,
    rgb(var(--ds-color-brand-pink) / 0.08) 38%,
    transparent 68%
  );
  --ds-gradient-radial-pink-surface:
    var(--ds-gradient-radial-pink-surface-image), rgb(var(--ds-color-gray-900));

  /* Promptbox composite (base from Gray 850) */
  --ds-gradient-promptbox-base: var(--ds-color-gray-850);
  --ds-gradient-promptbox-overlay: linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 100%);

  /* --- Legacy neutral → gray (Tailwind neutral-* compatibility) --- */
  --ds-color-neutral-0: var(--ds-color-white);
  --ds-color-neutral-300: var(--ds-color-gray-200);
  --ds-color-neutral-400: var(--ds-color-gray-500);
  --ds-color-neutral-500: var(--ds-color-gray-400);
  --ds-color-neutral-600: var(--ds-color-gray-800);
  --ds-color-neutral-700: var(--ds-color-gray-750);
  --ds-color-neutral-800: var(--ds-color-gray-850);
  --ds-color-neutral-900: var(--ds-color-gray-950);

  /* ======================================================================
     SEMANTIC COLOURS — Figma names (Semantic collection, Dark mode)
     Variable names mirror Figma: Colour/text/primary → --ds-colour-text-primary
     ====================================================================== */

  /* Brand-Pink (Figma semantic variable) */
  --ds-colour-brand-pink: var(--ds-color-brand-pink);

  /* Colour/text/* */
  --ds-colour-text-caution: var(--ds-color-caution-300);
  --ds-colour-text-disabled: var(--ds-color-gray-450);
  --ds-colour-text-error: var(--ds-color-error-400);
  --ds-colour-text-info: var(--ds-color-info-400);
  --ds-colour-text-inverse: var(--ds-color-gray-950);
  --ds-colour-text-on-inverse: var(--ds-color-gray-950);
  --ds-colour-text-placeholder: var(--ds-color-gray-500);
  --ds-colour-text-primary: var(--ds-color-white);
  --ds-colour-text-secondary: var(--ds-color-gray-500);
  --ds-colour-text-success: var(--ds-color-success-400);
  --ds-colour-text-tertiary: var(--ds-color-gray-450);

  /* Colour/bg/* */
  --ds-colour-bg-active: var(--ds-color-gray-700);
  --ds-colour-bg-caution: var(--ds-color-caution-700);
  --ds-colour-bg-disabled: var(--ds-color-gray-900);
  --ds-colour-bg-error: var(--ds-color-error-700);
  --ds-colour-bg-hover: var(--ds-color-gray-750);
  --ds-colour-bg-info: var(--ds-color-info-50);
  --ds-colour-bg-inverse: var(--ds-color-white);
  --ds-colour-bg-page: var(--ds-color-gray-950);
  --ds-colour-bg-subtle: var(--ds-color-gray-700);
  --ds-colour-bg-success: var(--ds-color-success-50);
  --ds-colour-bg-surface: var(--ds-color-gray-800);
  --ds-colour-bg-surface-raised: var(--ds-color-gray-750);

  /* Colour/border/* */
  --ds-colour-border-default: var(--ds-color-gray-800);
  --ds-colour-border-disabled: var(--ds-color-gray-850);
  --ds-colour-border-focus: var(--ds-color-white);
  --ds-colour-border-inverse: var(--ds-color-white);
  --ds-colour-border-strong: var(--ds-color-gray-700);
  --ds-colour-border-subtle: var(--ds-color-gray-850);

  /* Colour/focus/* */
  --ds-colour-focus-ring: var(--ds-color-white);

  /* Colour/icon/* */
  --ds-colour-icon-disabled: var(--ds-color-gray-450);
  --ds-colour-icon-inverse: var(--ds-color-gray-950);
  --ds-colour-icon-primary: var(--ds-color-white);
  --ds-colour-icon-secondary: var(--ds-color-gray-500);
  --ds-colour-icon-tertiary: var(--ds-color-gray-450);

  /* Colour/interactive/* */
  --ds-colour-interactive-accent-content: var(--ds-color-white);
  --ds-colour-interactive-accent-content-disabled: var(--ds-color-gray-500);
  --ds-colour-interactive-accent-surface: var(--ds-color-pink-500);
  --ds-colour-interactive-accent-surface-active: var(--ds-color-pink-700);
  --ds-colour-interactive-accent-surface-disabled: var(--ds-color-gray-700);
  --ds-colour-interactive-accent-surface-hover: var(--ds-color-pink-400);
  --ds-colour-interactive-primary-content: var(--ds-color-gray-950);
  --ds-colour-interactive-primary-content-disabled: var(--ds-color-gray-500);
  --ds-colour-interactive-primary-surface: var(--ds-color-white);
  --ds-colour-interactive-primary-surface-active: var(--ds-color-gray-200);
  --ds-colour-interactive-primary-surface-disabled: var(--ds-color-gray-700);
  --ds-colour-interactive-primary-surface-hover: var(--ds-color-gray-50);
  --ds-colour-interactive-secondary-content: var(--ds-color-white);
  --ds-colour-interactive-secondary-content-disabled: var(--ds-color-gray-450);
  --ds-colour-interactive-secondary-surface: var(--ds-color-gray-800);
  --ds-colour-interactive-secondary-surface-active: var(--ds-color-gray-700);
  --ds-colour-interactive-secondary-surface-disabled: var(--ds-color-gray-700);
  --ds-colour-interactive-secondary-surface-hover: var(--ds-color-gray-750);

  /* Colour/overlay/* (Figma uses “default white” etc.; hyphenated here) */
  --ds-colour-overlay-default: var(--ds-color-overlay-black-default);
  --ds-colour-overlay-default-white: var(--ds-color-overlay-white-default);
  --ds-colour-overlay-strong: var(--ds-color-overlay-black-strong);
  --ds-colour-overlay-strong-white: var(--ds-color-overlay-white-strong);
  --ds-colour-overlay-subtle: var(--ds-color-overlay-black-subtle);
  --ds-colour-overlay-subtle-white: var(--ds-color-overlay-white-subtle);
  --ds-colour-overlay-black-faint: var(--ds-color-overlay-black-faint);
  --ds-colour-overlay-black-muted: var(--ds-color-overlay-black-muted);
  --ds-colour-overlay-white-faintest: var(--ds-color-overlay-white-faintest);
  --ds-colour-overlay-white-faint: var(--ds-color-overlay-white-faint);
  --ds-colour-overlay-white-muted: var(--ds-color-overlay-white-muted);
  --ds-colour-overlay-toolbar: rgba(36, 36, 36, 0.7);

  /* Colour/badge/* — compact status badges on dark media / UI (primitive pairings; readable on scrims) */
  --ds-colour-badge-success-bg: var(--ds-color-success-700);
  /* Green text on dark green surface (not white — reads as success, still AA on success-700) */
  --ds-colour-badge-success-text: var(--ds-colour-text-success);
  --ds-colour-badge-info-bg: var(--ds-color-info-700);
  --ds-colour-badge-info-text: var(--ds-color-white);
  --ds-colour-badge-error-bg: var(--ds-color-error-700);
  --ds-colour-badge-error-text: var(--ds-color-error-100);
  --ds-colour-badge-caution-bg: var(--ds-color-caution-700);
  --ds-colour-badge-caution-text: var(--ds-color-caution-100);

  /* ======================================================================
     App semantic aliases (stable names for existing Tailwind + components)
     → prefer --ds-colour-* / Figma names for new work
     ====================================================================== */

  --ds-content-primary: var(--ds-colour-text-primary);
  --ds-content-secondary: var(--ds-colour-text-secondary);
  --ds-content-tertiary: var(--ds-colour-text-tertiary);
  --ds-content-placeholder: var(--ds-colour-text-placeholder);
  --ds-content-disabled-strong: var(--ds-colour-text-disabled);
  --ds-content-disabled-subtle: var(--ds-colour-text-disabled);
  --ds-content-inverse: var(--ds-colour-text-inverse);
  --ds-content-brand: var(--ds-colour-brand-pink);
  --ds-content-brand-gradient: var(--ds-gradient-accent-surface);
  --ds-content-interactive: var(--ds-colour-interactive-secondary-content);
  --ds-content-interactive-hover: var(--ds-color-press-on-dark);
  --ds-content-interactive-click: var(--ds-color-press-on-dark-strong);
  --ds-content-success: var(--ds-colour-text-success);
  --ds-content-error: var(--ds-colour-text-error);
  --ds-content-caution: var(--ds-colour-text-caution);
  --ds-content-info: var(--ds-colour-text-info);

  --ds-surface-primary: var(--ds-colour-bg-page);
  --ds-surface-secondary: var(--ds-colour-bg-surface);
  --ds-surface-tertiary: var(--ds-colour-bg-surface-raised);
  --ds-surface-inverse: var(--ds-colour-bg-inverse);
  --ds-surface-interactive-hover: var(--ds-colour-bg-hover);
  --ds-surface-interactive-click: var(--ds-colour-bg-active);
  --ds-surface-interactive-click-inverse: var(--ds-colour-overlay-subtle-white);
  --ds-surface-interactive-hover-inverse: var(--ds-colour-overlay-subtle-white);
  --ds-surface-disabled: var(--ds-colour-bg-disabled);
  --ds-surface-brand: var(--ds-colour-interactive-accent-surface);
  --ds-surface-brand-gradient: var(--ds-gradient-accent-surface);
  --ds-surface-elevated: var(--ds-gradient-surface-overlay);
  --ds-surface-promptbox-base: var(--ds-gradient-promptbox-base);
  --ds-surface-promptbox-overlay: var(--ds-gradient-promptbox-overlay);
  --ds-surface-success: var(--ds-colour-bg-success);
  --ds-surface-error: var(--ds-colour-bg-error);
  --ds-surface-caution: var(--ds-colour-bg-caution);
  --ds-surface-info: var(--ds-colour-bg-info);

  --ds-surface-badge-success: var(--ds-colour-badge-success-bg);
  --ds-surface-badge-info: var(--ds-colour-badge-info-bg);
  --ds-surface-badge-error: var(--ds-colour-badge-error-bg);
  --ds-surface-badge-caution: var(--ds-colour-badge-caution-bg);
  --ds-content-badge-success: var(--ds-colour-badge-success-text);
  --ds-content-badge-info: var(--ds-colour-badge-info-text);
  --ds-content-badge-error: var(--ds-colour-badge-error-text);
  --ds-content-badge-caution: var(--ds-colour-badge-caution-text);

  --ds-border-primary: var(--ds-colour-border-default);
  --ds-border-inverse: var(--ds-colour-border-inverse);
  --ds-border-secondary: var(--ds-colour-border-subtle);
  --ds-border-tertiary-white: var(--ds-color-hairline-on-dark);
  --ds-border-tertiary-black: var(--ds-colour-border-subtle);
  --ds-border-brand: var(--ds-colour-brand-pink);
  --ds-border-brand-gradient: var(--ds-gradient-border-brand);
  --ds-border-focus: var(--ds-colour-border-focus);

  --ds-overlay-background: var(--ds-colour-overlay-default);
  --ds-overlay-background-subtle: var(--ds-colour-overlay-subtle);
  --ds-overlay-hover-white: var(--ds-colour-overlay-subtle-white);
  --ds-overlay-hover-black: var(--ds-colour-overlay-subtle);
  --ds-overlay-card-scrim: var(--ds-gradient-card-scrim);
  --ds-overlay-image-scrim: var(--ds-gradient-image-scrim);
}

/* ==========================================================================
   Typography — Figma: Visual Exploration 2 · Typography (node 48:3701)
   Style paths use slash notation in Figma, e.g. text/display/one
   Font stack: Typekit (https://use.typekit.net/gde3qqi.css)
   ========================================================================== */

/* Metric-adjusted pre-swap fallbacks (fontTools over the published kit woff2s); the medium/bold local cuts are deliberate — the kit faces run heavier than Arial regular. */
@font-face {
  font-family: 'neue-haas-grotesk-text-fallback';
  font-weight: 100 500;
  src:
    local('Helvetica Neue Medium'),
    local('HelveticaNeue-Medium'),
    local('Roboto Medium'),
    local('Segoe UI Semibold'),
    local('Arial');
  size-adjust: 100.1%;
  ascent-override: 97.71%;
  descent-override: 24.48%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'neue-haas-grotesk-text-fallback';
  font-weight: 600 900;
  src:
    local('Arial Bold'),
    local('Arial-BoldMT'),
    local('Roboto Bold');
  size-adjust: 101.07%;
  ascent-override: 98.64%;
  descent-override: 26.02%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'owners-narrow-fallback';
  src: local('Arial');
  size-adjust: 86.24%;
  ascent-override: 107.6%;
  descent-override: 28.87%;
  line-gap-override: 0%;
}

:root {
  /* Per-locale downscale for button/label text in long-word locales; floored via max() below. Overrides in html[lang=...] at end of file. */
  --ds-font-scale: 1;

  /* --- Font families (doc/font/*) --- */
  --ds-font-body: 'neue-haas-grotesk-text', 'neue-haas-grotesk-text-fallback',
    sans-serif;
  --ds-font-display-narrow: 'owners-narrow', 'owners-narrow-fallback',
    sans-serif;

  /* --- text/display/* — Owners Narrow, bold, uppercase --- */
  --ds-text-display-one-font-size: 80px;
  --ds-text-display-one-line-height: 80px;

  --ds-text-display-two-font-size: 64px;
  --ds-text-display-two-line-height: 64px;

  /* --- text/title/* — Owners Narrow, bold, uppercase --- */
  --ds-text-title-one-font-size: 48px;
  --ds-text-title-one-line-height: 48px;

  --ds-text-title-two-font-size: 32px;
  --ds-text-title-two-line-height: 32px;

  --ds-text-title-three-font-size: 24px;
  --ds-text-title-three-line-height: 26px;

  --ds-text-title-four-font-size: 18px;
  --ds-text-title-four-line-height: 20px;

  /* --- text/title/sentence/* — Neue Haas (body stack), sentence case --- */
  --ds-text-title-sentence-one-bold-font-size: 48px;
  --ds-text-title-sentence-one-bold-line-height: 50px;

  --ds-text-title-sentence-one-medium-font-size: 48px;
  --ds-text-title-sentence-one-medium-line-height: 50px;

  --ds-text-title-sentence-two-bold-font-size: 32px;
  --ds-text-title-sentence-two-bold-line-height: 34px;

  --ds-text-title-sentence-two-medium-font-size: 32px;
  --ds-text-title-sentence-two-medium-line-height: 34px;

  --ds-text-title-sentence-three-bold-font-size: 24px;
  --ds-text-title-sentence-three-bold-line-height: 26px;

  --ds-text-title-sentence-three-medium-font-size: 24px;
  --ds-text-title-sentence-three-medium-line-height: 26px;

  --ds-text-title-sentence-four-bold-font-size: 18px;
  --ds-text-title-sentence-four-bold-line-height: 20px;

  --ds-text-title-sentence-four-medium-font-size: 18px;
  --ds-text-title-sentence-four-medium-line-height: 20px;

  /* --- text/body/* — Neue Haas Grotesk (body stack), sentence case --- */
  --ds-text-body-large-medium-font-size: 18px;
  --ds-text-body-large-medium-line-height: 26px;

  --ds-text-body-large-regular-font-size: 18px;
  --ds-text-body-large-regular-line-height: 26px;

  --ds-text-body-medium-medium-font-size: 16px;
  --ds-text-body-medium-medium-line-height: 24px;

  --ds-text-body-medium-regular-font-size: 16px;
  --ds-text-body-medium-regular-line-height: 24px;

  --ds-text-body-small-medium-font-size: 14px;
  --ds-text-body-small-medium-line-height: 18px;

  --ds-text-body-small-regular-font-size: 14px;
  --ds-text-body-small-regular-line-height: 20px;

  /* --- text/micro/* --- */
  --ds-text-micro-small-medium-font-size: 12px;
  --ds-text-micro-small-medium-line-height: 16px;

  --ds-text-micro-small-regular-font-size: 12px;
  --ds-text-micro-small-regular-line-height: 16px;

  /* Extra UI size (not on typography sheet); keep for dense chrome */
  --ds-text-micro-xs-font-size: 10px;
  --ds-text-micro-xs-line-height: 14px;

  /* --- text/label/caps/* — Owners Narrow --- */
  --ds-text-label-caps-large-font-size: 16px;
  --ds-text-label-caps-large-line-height: 16px;

  --ds-text-label-caps-large-italic-font-size: 16px;
  --ds-text-label-caps-large-italic-line-height: 16px;

  --ds-text-label-caps-small-font-size: 14px;
  --ds-text-label-caps-small-line-height: 14px;

  --ds-text-label-caps-small-italic-font-size: 14px;
  --ds-text-label-caps-small-italic-line-height: 14px;

  --ds-text-label-caps-micro-font-size: 12px;
  --ds-text-label-caps-micro-line-height: 12px;

  --ds-text-label-caps-micro-italic-font-size: 12px;
  --ds-text-label-caps-micro-italic-line-height: 12px;

  /* --- text/label/sentence/* — Neue Haas (body stack) --- */
  --ds-text-label-sentence-large-medium-font-size: max(14px, calc(16px * var(--ds-font-scale)));
  --ds-text-label-sentence-large-medium-line-height: 14px;

  --ds-text-label-sentence-large-bold-font-size: max(14px, calc(16px * var(--ds-font-scale)));
  --ds-text-label-sentence-large-bold-line-height: 14px;

  --ds-text-label-sentence-large-bold-relaxed-font-size: max(14px, calc(16px * var(--ds-font-scale)));
  --ds-text-label-sentence-large-bold-relaxed-line-height: 18px;

  --ds-text-label-sentence-small-medium-font-size: max(12px, calc(14px * var(--ds-font-scale)));
  --ds-text-label-sentence-small-medium-line-height: 14px;

  --ds-text-label-sentence-small-bold-font-size: max(12px, calc(14px * var(--ds-font-scale)));
  --ds-text-label-sentence-small-bold-line-height: 14px;

  --ds-text-label-sentence-micro-medium-font-size: max(11px, calc(12px * var(--ds-font-scale)));
  --ds-text-label-sentence-micro-medium-line-height: 16px;

  --ds-text-label-sentence-micro-bold-font-size: max(11px, calc(12px * var(--ds-font-scale)));
  --ds-text-label-sentence-micro-bold-line-height: 16px;
}

/* Long-word Latin + Cyrillic locales: nudge button/label text down to curb overflow.
   CJK/Korean glyphs are compact (shorter strings) and English/Hebrew stay at 1. */
html[lang='de'],
html[lang='nl'],
html[lang='da'],
html[lang='sv'],
html[lang='no'],
html[lang='fi'],
html[lang='pl'],
html[lang='pt'],
html[lang='es'],
html[lang='fr'],
html[lang='it'],
html[lang='tr'],
html[lang='ru'],
html[lang='uk'] {
  --ds-font-scale: 0.92;
}

/* ==========================================================================
   Spacing — Scale + semantic aliases
   Source of truth: Figma variable exports (Mode 1)
   Base unit: 4px
   ========================================================================== */

:root {
  /* --- Primitive Scale --- */
  --ds-space-0: 0px;
  --ds-space-px: 1px;
  --ds-space-0-5: 2px;
  --ds-space-1: 4px;
  --ds-space-2: 8px;
  --ds-space-2-5: 10px;
  --ds-space-3: 12px;
  --ds-space-3-5: 14px;
  --ds-space-4: 16px;
  --ds-space-4-5: 18px;
  --ds-space-5: 20px;
  --ds-space-6: 24px;
  --ds-space-7: 28px;
  --ds-space-8: 32px;
  --ds-space-9: 36px;
  --ds-space-10: 40px;
  --ds-space-12: 48px;
  --ds-space-14: 56px;
  --ds-space-15: 60px;
  --ds-space-16: 64px;
  --ds-space-20: 80px;
  --ds-space-24: 96px;
  --ds-space-32: 128px;
  --ds-space-40: 160px;
  --ds-space-60: 240px;

  /* --- Semantic Spacing --- */
  --ds-spacing-0x: var(--ds-space-0);       /* 0px */
  --ds-spacing-0-5x: var(--ds-space-0-5);   /* 2px */
  --ds-spacing-1x: var(--ds-space-1);       /* 4px */
  --ds-spacing-2x: var(--ds-space-2);       /* 8px */
  --ds-spacing-2-5x: var(--ds-space-2-5);   /* 10px */
  --ds-spacing-3x: var(--ds-space-3);       /* 12px */
  --ds-spacing-4x: var(--ds-space-4);       /* 16px */
  --ds-spacing-5x: var(--ds-space-5);       /* 20px */
  --ds-spacing-6x: var(--ds-space-6);       /* 24px */
  --ds-spacing-8x: var(--ds-space-8);       /* 32px */
  --ds-spacing-10x: var(--ds-space-10);     /* 40px */
  --ds-spacing-12x: var(--ds-space-12);     /* 48px */
  --ds-spacing-16x: var(--ds-space-16);     /* 64px */
  --ds-spacing-32x: var(--ds-space-32);     /* 128px */
}

/* ==========================================================================
   Border Radius
   Source of truth: Figma variable exports (Mode 1)
   Matches design-system/src/css/figma-spacing-radius.css
   ========================================================================== */

:root {
  --ds-radius-none: 0px;
  --ds-radius-2xs: 2px;
  --ds-radius-xs: 4px;
  --ds-radius-sm: 8px;
  --ds-radius-md: 12px;
  --ds-radius-lg: 16px;
  --ds-radius-20: 20px;
  --ds-radius-xl: 24px;
  --ds-radius-28: 28px;
  --ds-radius-2xl: 32px;
  --ds-radius-pill: 9999px;
  --ds-radius-circle: 50%;

  --ds-radius-3xl: var(--ds-radius-2xl);
  --ds-radius-4xl: var(--ds-radius-28);
  --ds-radius-full: var(--ds-radius-pill);
}

/* ==========================================================================
   Borders — Border widths
   Source of truth: Figma variable exports (Mode 1)
   ========================================================================== */

:root {
  --ds-border-thin: 1px;
  --ds-border-medium: 2px;
  --ds-border-selection: 3px;
  --ds-border-thick: 4px;
}

/* ==========================================================================
   Icon Sizes
   Source of truth: Figma variable exports (Mode 1)
   ========================================================================== */

:root {
  --ds-icon-xs: 12px;
  --ds-icon-sm: 14px;
  --ds-icon-md: 16px;
  /* Primary Accent buttons + GenCost (Figma Visual Exploration 2) */
  --ds-icon-button-accent: 18px;
  --ds-icon-lg: 20px;
  --ds-icon-xl: 24px;
  --ds-icon-2xl: 32px;
}

/* ==========================================================================
   Effects — Shadows, background blurs
   Image scrim gradient: css/colors.css (Figma style: image-scrim)
   ========================================================================== */

@property --ds-card-blur-opacity {
  syntax: "<number>";
  inherits: true;
  initial-value: 1;
}

:root {
  /* --- Box Shadows --- */
  --ds-shadow-light: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
  --ds-shadow-medium: 0px 0px 8px 0px rgba(0, 0, 0, 0.25);
  --ds-shadow-heavy: 0px 4px 44px 0px rgba(0, 0, 0, 0.40);
  --ds-shadow-floating: 2px 2px 8px 3px rgba(0, 0, 0, 0.25);
  --ds-shadow-toolbar: 0px 4px 28px 0px rgba(0, 0, 0, 0.25), 0px 6px 44px 0px rgba(0, 0, 0, 0.15), 0px 4px 8px 0px rgba(0, 0, 0, 0.03);
  --ds-shadow-inner: inset 0px -4px 0px 0px rgba(0, 0, 0, 0.25);
  --ds-shadow-inner-sm: inset 0px -2px 0px 0px rgba(0, 0, 0, 0.25);
  --ds-shadow-slider-knob: 0px 0.5px 4px 0px rgba(0, 0, 0, 0.12), 0px 6px 13px 0px rgba(0, 0, 0, 0.12);
  /* Inset pink glow for selected/highlighted cards (Pink 400) */
  --ds-shadow-glow-pink-inset: inset 0px 0px 16px 0px rgb(var(--ds-color-pink-400));
  /* Outer pink glow for selected/highlighted cards (Pink 500) */
  --ds-shadow-glow-pink: 0px 0px 24px 0px rgb(var(--ds-color-pink-500) / 0.25);

  /* --- Background Blurs --- */
  --ds-blur-light: 6px;
  --ds-blur-heavy: 8px;
  --ds-blur-prompt-box: 20px;
  --ds-blur-prompt-box-strong: 40px;

  /* --- Gradients --- */
  /* --ds-gradient-image-scrim: defined in colors.css (Figma style: image-scrim) */

  /**
   * PromptBoxContainer bottom fade: shorter band (~22%); long feathered tail of
   * micro-stops near alpha 0 so the edge doesn’t read as a hard line.
   */
  --ds-prompt-box-scrim-height: 294px;
  --ds-gradient-prompt-box-scrim: linear-gradient(
    to top,
    var(--ds-colour-bg-page) 0%,
    rgba(13, 13, 13, 0.992) 0.55%,
    rgba(13, 13, 13, 0.975) 1.15%,
    rgba(13, 13, 13, 0.945) 1.85%,
    rgba(13, 13, 13, 0.9) 2.65%,
    rgba(13, 13, 13, 0.84) 3.55%,
    rgba(13, 13, 13, 0.76) 4.55%,
    rgba(13, 13, 13, 0.66) 5.65%,
    rgba(13, 13, 13, 0.55) 6.85%,
    rgba(13, 13, 13, 0.44) 8.1%,
    rgba(13, 13, 13, 0.34) 9.35%,
    rgba(13, 13, 13, 0.255) 10.55%,
    rgba(13, 13, 13, 0.185) 11.7%,
    rgba(13, 13, 13, 0.13) 12.75%,
    rgba(13, 13, 13, 0.09) 13.65%,
    rgba(13, 13, 13, 0.062) 14.45%,
    rgba(13, 13, 13, 0.042) 15.15%,
    rgba(13, 13, 13, 0.028) 15.75%,
    rgba(13, 13, 13, 0.018) 16.25%,
    rgba(13, 13, 13, 0.012) 16.65%,
    rgba(13, 13, 13, 0.008) 17%,
    rgba(13, 13, 13, 0.0052) 17.3%,
    rgba(13, 13, 13, 0.0034) 17.55%,
    rgba(13, 13, 13, 0.0022) 17.8%,
    rgba(13, 13, 13, 0.0014) 18%,
    rgba(13, 13, 13, 0.0009) 18.18%,
    rgba(13, 13, 13, 0.00055) 18.35%,
    rgba(13, 13, 13, 0.00032) 18.5%,
    rgba(13, 13, 13, 0.00018) 18.65%,
    rgba(13, 13, 13, 0.0001) 18.78%,
    rgba(13, 13, 13, 0.00005) 18.9%,
    rgba(13, 13, 13, 0.00002) 19.05%,
    rgba(13, 13, 13, 0.000008) 19.2%,
    rgba(13, 13, 13, 0) 19.5%
  );
}

/* Remove default mobile tap flash on pill / filter triggers (no inline styles) */
.ds-touch-no-highlight {
  -webkit-tap-highlight-color: transparent;
}

/* ==========================================================================
   Motion — Duration, easing, and spring presets
   ========================================================================== */

:root {
  /* --- Durations --- */
  --ds-motion-duration-instant: 100ms;
  --ds-motion-duration-fast: 150ms;
  --ds-motion-duration-normal: 250ms;
  --ds-motion-duration-slow: 400ms;
  --ds-motion-duration-slower: 600ms;

  /* --- Easings (CSS) --- */
  --ds-motion-ease-default: cubic-bezier(0.25, 0.1, 0.25, 1);
  --ds-motion-ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ds-motion-ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ds-motion-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ds-motion-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /*
    --- Spring Presets (JS / framer-motion) ---
    Use in framer-motion `transition` prop:

    Snappy (buttons, toggles):
      { type: 'spring', stiffness: 500, damping: 30 }

    Standard (sliding indicators, panels):
      { type: 'spring', stiffness: 300, damping: 24 }

    Gentle (page transitions, large elements):
      { type: 'spring', stiffness: 200, damping: 20 }

    Bouncy (playful overshoot, segment indicator):
      { type: 'spring', stiffness: 400, damping: 25, mass: 0.8 }
  */
}