/* ============================================================================
   Tinteon — Design Tokens · "Colour Lab"
   A white gallery wall, paint chips and draw-down cards. Colour arrives as
   solid blocks (chips, full-bleed bands), never as gradients.
   Brand inks come from the fixed logo (see LOGO_RESEARCH.md in logo):
     front chip aubergine #3A1F6B · middle chip raspberry #D6336C ·
     back chip saffron #F4A51C · wordmark ink #2A1747.
   Old token names are kept (with new values) so every sub-page that
   references them inline keeps resolving.
   ========================================================================== */

:root {
  color-scheme: light;

  /* ---- Gallery surfaces ---- */
  --paper:     #ffffff;   /* the wall: page canvas */
  --wall:      #f4f3f6;   /* cool grey-lilac for alternating rooms */
  --plinth:    #ebe9ef;   /* deeper neutral for bars, table heads */
  --bg-base:   var(--paper);
  --bg-900:    var(--paper);
  --bg-800:    var(--wall);
  --surface-1: #ffffff;
  --surface-2: #f7f6f9;
  --surface-3: #eeecf2;
  --canvas:    #fbfafc;

  /* ---- Ink ---- */
  --ink:            #1d1430;   /* aubergine-black, headings */
  --text-primary:   #1d1430;
  --text-secondary: #463e55;   /* 9.6:1 on white */
  --text-muted:     #625a70;   /* 6.6:1 on white */
  --text-faint:     #6f6880;   /* 5.4:1 on white */
  --text-on-accent: #ffffff;

  /* ---- Rules ---- */
  --border-subtle:  #ebe9ef;
  --border-default: #dcd9e2;
  --border-strong:  #b9b4c3;
  --grid-line:      #efedf3;
  --ring:           #d6336c;   /* raspberry focus ring reads on white and on chips */

  /* ---- Brand inks (logo chips) ---- */
  --aubergine: #3a1f6b;
  --raspberry: #d6336c;
  --raspberry-ink: #b0224f;    /* text-safe raspberry, 5.9:1 on white */
  --saffron:   #f4a51c;
  --saffron-ink: #8a5600;      /* text-safe saffron, 5.6:1 on white */
  --brand-front: var(--aubergine);
  --brand-mid:   var(--raspberry);
  --brand-back:  var(--saffron);

  /* ---- Accent (primary action) ---- */
  --accent:       #3a1f6b;
  --accent-hover: #4b2a88;
  --accent-press: #2a1650;
  --accent-soft:  #ece6f7;

  /* ---- Draw-down card (Leneta-style opacity chart) ---- */
  --chart-black: #1b1b1f;
  --chart-white: #ffffff;
  --chart-grey:  #d9d7dd;

  /* ---- Status (always paired with a glyph and a text label) ---- */
  --st-queued:  #625a70;  --st-queued-soft:  #eeecf2;
  --st-running: #3a1f6b;  --st-running-soft: #ece6f7;
  --st-waiting: #0a6f8a;  --st-waiting-soft: #ddf0f5;
  --st-approve: #8a5600;  --st-approve-soft: #fdf0d8;
  --st-success: #0f766e;  --st-success-soft: #dcefec;
  --st-failed:  #b0224f;  --st-failed-soft:  #f9e0e9;
  --st-blocked: #9f1239;  --st-blocked-soft: #f5dde4;

  /* ---- Product chips (from each product logo brief in products_raw) ---- */
  --prod-tintra:  #7c3aed;
  --prod-dispex:  #4338ca;
  --prod-rheon:   #0e7490;
  --prod-specton: #b45309;
  --prod-palleon: #c2410c;
  --prod-coatwin: #0f766e;

  /* ---- Graph nodes / edges (sub-pages) ---- */
  --node-bg:     #ffffff;
  --node-border: var(--border-default);
  --node-active: var(--accent);
  --edge:        #c9c4d2;
  --edge-active: var(--aubergine);
  --edge-wrap:   #8c74c4;
  --run-done:    #9ac5c3;

  /* ---- Semantic ---- */
  --good: var(--st-success);
  --warn: var(--st-approve);
  --bad:  var(--st-failed);
  --info: var(--st-waiting);

  /* ---- Type ----
     Bodoni Moda: high-contrast display serif, the voice of a colour card.
     Only used at 1.5rem and up so the hairlines survive.
     Schibsted Grotesk: everything a person reads at length.
     Spline Sans Mono: only for logs, code and instrument values. */
  --font-display: "Bodoni Moda", "Didot", "Bodoni 72", Georgia, serif;
  --font-sans: "Schibsted Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               Helvetica, Arial, sans-serif;
  --font-mono: "Spline Sans Mono", "SF Mono", ui-monospace, Menlo, Consolas, monospace;

  --fs-hero:    clamp(3rem, 1.4rem + 6.4vw, 7.25rem);
  --fs-display: clamp(2.25rem, 1.5rem + 2.6vw, 3.75rem);
  --fs-h1:      clamp(2.4rem, 1.6rem + 3.2vw, 4rem);
  --fs-h2:      clamp(2rem, 1.4rem + 2.4vw, 3.25rem);
  --fs-h3:      clamp(1.15rem, 1.05rem + 0.4vw, 1.375rem);
  --fs-h4:      1.0625rem;
  --fs-lead:    clamp(1.125rem, 1.04rem + 0.35vw, 1.3125rem);
  --fs-body:    1rem;
  --fs-body-lg: 1.125rem;
  --fs-small:   0.875rem;
  --fs-mono:    0.8125rem;
  --fs-micro:   0.75rem;
  --fs-metric:  clamp(2.25rem, 1.6rem + 2.6vw, 3.75rem);
  --fs-price:   clamp(2.75rem, 2rem + 3vw, 4.25rem);

  /* ---- Spacing: 4-pt base ---- */
  --space-0: 0;     --space-1: 4px;   --space-2: 8px;   --space-3: 12px;
  --space-4: 16px;  --space-5: 20px;  --space-6: 24px;  --space-8: 32px;
  --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px;
  --space-24: 96px; --space-28: 112px;--space-32: 128px;--space-40: 160px;

  /* ---- Radii: chips are nearly square, buttons are fan-deck blades ---- */
  --radius-chip: 3px;
  --radius-sm: 3px; --radius-md: 4px; --radius-lg: 6px; --radius-xl: 10px;
  --radius-pill: 999px;

  /* ---- Containers ---- */
  --container-sm: 680px;  --container-md: 860px;  --container-lg: 1100px;
  --container-xl: 1280px; --container-2xl: 1440px;
  --gutter: clamp(16px, 4.5vw, 56px);

  /* ---- Gallery rhythm: generous rooms ---- */
  --section-y:    clamp(72px, 8.5vw, 136px);
  --section-y-lg: clamp(96px, 11vw, 176px);
  --nav-h: 72px;

  --panel-gap:  clamp(16px, 1.8vw, 28px);
  --panel-pad:  clamp(20px, 2vw, 32px);
  --log-line-y: 4px;
  --node-pad:   var(--space-3) var(--space-4);
  --step-gap:   var(--space-5);
  --stack:      clamp(12px, 1.4vw, 20px);

  /* ---- Motion ---- */
  --dur-fast: 120ms; --dur-base: 220ms; --dur-slow: 520ms; --dur-run: 600ms;
  --ease-out: cubic-bezier(0.2, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --pulse: 1.6s;

  /* ---- Elevation: chips sit on the wall with one crisp contact shadow ---- */
  --hairline: 1px solid var(--border-default);
  --shadow-1: 0 1px 0 rgba(29, 20, 48, 0.08);
  --shadow-2: 0 1px 2px rgba(29, 20, 48, 0.08), 0 8px 24px -12px rgba(29, 20, 48, 0.18);
  --shadow-3: 0 2px 4px rgba(29, 20, 48, 0.08), 0 24px 48px -24px rgba(29, 20, 48, 0.28);
  --scrim:    rgba(29, 20, 48, 0.42);

  --grid-cols: 12;
  --grid-gap: var(--panel-gap);
}