/* =========================================================
   S.T. DETAILING, DESIGN TOKENS
   Richting A "Studio": diep donker, lak en licht, serif met karakter.

   Kleuren zijn gemeten op het logobestand (pipet op st-logo.png), niet
   geschat: koper #C07030 middentoon, #F8A048 highlight, #602800 schaduw,
   chroom-highlight #F3CFA2, zwart #0A0A0B tot #181818.

   Verhouding: circa 60% zwart en grafiet, 30% gebroken wit (tekst),
   10% koper en chroom, uitsluitend in details.
   ========================================================= */

/* ---- Lettertypen: zelf gehost, zie /css/fonts.css (gegenereerd door
   build/fonts.js uit wat er in src/fonts staat). ---- */

:root {
  /* ---- Color: donkere basis (60%) ---- */
  --color-bg: #0A0A0B;
  --color-surface: #141416;
  --color-surface-elevated: #1C1C1F;
  --color-border: rgba(243, 207, 162, 0.12);
  --color-border-strong: rgba(243, 207, 162, 0.26);

  /* ---- Color: grafiet-trappen ---- */
  --color-graphite-900: #0A0A0B;
  --color-graphite-800: #141416;
  --color-graphite-700: #1C1C1F;
  --color-graphite-600: #26262A;
  --color-graphite-500: #3A3A40;

  /* ---- Color: tekst (30%) ---- */
  --color-text-primary: #F3EFE8;
  --color-text-secondary: #B9B4AB;
  --color-text-muted: #8E8A82;
  /* De "inverse"-tokens betekenen in de componenten "tekst op een donker
     vlak". Nu de hele site donker is, vallen ze samen met de primaire tekst.
     Zo blijven alle bestaande donkere secties en panelen automatisch goed. */
  --color-text-inverse: #F3EFE8;
  --color-text-inverse-secondary: #B9B4AB;
  --color-text-inverse-muted: #8E8A82;

  /* ---- Color: licht vlak (alleen de header en enkele accenten) ---- */
  --color-paper: #F3EFE8;
  --color-paper-2: #E9E4DA;
  --color-on-paper: #141416;
  --color-on-paper-secondary: #4A4842;
  --color-on-paper-muted: #6E6A62;

  /* ---- Color: koper en chroom (10%, gemeten op het logo) ---- */
  --color-accent: #C07030;
  --color-accent-hover: #D48440;
  --color-accent-deep: #602800;
  --color-accent-light: #F8A048;
  --color-chrome: #F3CFA2;
  --color-accent-soft: rgba(192, 112, 48, 0.14);
  --color-accent-on-dark: #F8A048;

  /* ---- Color: semantisch ---- */
  --color-success: #6FB08E;
  --color-error: #E06A5E;

  /* ---- Elevation: op donker werkt licht, niet schaduw ---- */
  --shadow-sm: 0 1px 0 rgba(243, 207, 162, 0.06);
  --shadow-md: 0 12px 32px -12px rgba(0, 0, 0, 0.6);
  --shadow-lg: 0 32px 72px -24px rgba(0, 0, 0, 0.75);
  --shadow-focus: 0 0 0 3px rgba(248, 160, 72, 0.45);

  /* ---- Radius: strak, nauwelijks afgerond ---- */
  --radius-sm: 2px;
  --radius-md: 3px;
  --radius-lg: 4px;
  --radius-pill: 999px;

  /* ---- Borders ---- */
  --border-hairline: 1px solid var(--color-border);
  --border-hairline-dark: 1px solid rgba(20, 20, 22, 0.14);

  /* ---- Typography families ---- */
  --font-display: "Lora", "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* ---- Type scale (fluid). Display groot en met lef. ---- */
  --fs-display: clamp(2.75rem, 1.6rem + 4.2vw, 5.75rem);
  --fs-h1: clamp(2.5rem, 1.9rem + 2.6vw, 4.25rem);
  --fs-h2: clamp(2rem, 1.6rem + 1.8vw, 3.5rem);
  --fs-h3: clamp(1.375rem, 1.2rem + 0.7vw, 1.875rem);
  --fs-h4: 1.25rem;
  --fs-body-lg: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  --fs-body: 1.0625rem;
  --fs-small: 0.9rem;
  --fs-caption: 0.72rem;
  --fs-button: 0.8125rem;

  --lh-tight: 0.98;
  --lh-snug: 1.15;
  --lh-normal: 1.55;
  --lh-relaxed: 1.65;

  --ls-tight: -0.025em;
  --ls-normal: 0;
  --ls-wide: 0.1em;
  --ls-wider: 0.2em;

  /* ---- Spacing scale (8-basis) ---- */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2rem;
  --space-xl: 3rem;
  --space-2xl: 4.5rem;
  --space-3xl: 7.5rem;
  --space-4xl: 10rem;

  /* ---- Layout ---- */
  --container-max: 1280px;
  --container-narrow: 840px;
  --gutter: clamp(1.25rem, 4vw, 3.5rem);

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 160ms;
  --dur-base: 280ms;
  --dur-slow: 640ms;
  --dur-image: 1100ms;

  /* ---- Z-index ---- */
  --z-nav: 100;
  --z-overlay: 200;
  --z-modal: 300;
  --z-toast: 400;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-base: 0ms;
    --dur-slow: 0ms;
    --dur-image: 0ms;
  }
}