/*
 * Design tokens for dominik-witzke.de: the one place every shared value lives.
 *
 * Layer 1, base values: palette. Only the semantic tokens point at them.
 * Layer 2, semantic tokens: what a value is for (surface, ink, line, accent,
 * type roles, spacing, radii, motion). Pages, story files, Tailwind and the
 * explanatory graphics use these.
 * Layer 3, project accent: --case-accent and its three companions. A story
 * file may set them for its exhibits and at most two chapter surfaces.
 *
 * Load first on every page, before custom.css. Rules: DESIGN-TOKENS.md.
 * A trailing comment is the usage note; tools/tokens_export.py copies it into
 * the JSON export. Breakpoints cannot be custom properties: use min-width
 * 640 / 768 / 1024 / 1280 px and max-width 639.98 / 767.98 / 1023.98 /
 * 1279.98 px, plus 479.98 and 379.98 px for very narrow phones.
 */

:root {
  /* ---------- Layer 1: palette ---------- */

  --blue-50: #f4f4fb; /* tint behind decision boxes */
  --blue-300: #aab2ff; /* system blue on dark surfaces */
  --blue-500: #3a41e4; /* system blue */
  --blue-600: #2c33c9; /* system blue, hover and pressed */

  --grey-0: #ffffff; /* white */
  --grey-100: #ececec; /* light grey surface */
  --grey-500: #5f6468; /* muted text: 6.0:1 on white, 5.1:1 on grey-100 */
  --grey-700: #44494d; /* body text: 9.1:1 on white, 7.7:1 on grey-100 */
  --grey-900: #232323; /* ink: 15.7:1 on white */

  --night-800: #1d2429; /* neutral dark */

  --red-600: #b3261e; /* errors */

  /* ---------- Layer 2: colour ---------- */

  --color-surface: var(--grey-0); /* page and card ground */
  --color-surface-alt: var(--grey-100); /* alternating sections, ground of About and legal pages */
  --color-surface-tint: var(--blue-50); /* decision boxes */
  --color-surface-dark: var(--night-800); /* dark chapters and the chapter bar */
  --color-surface-accent: var(--blue-500); /* footer, next-project band, project cards */
  --color-scrim: rgba(29, 36, 41, 0.62); /* backdrop behind dialogs */

  --color-ink: var(--grey-900); /* headings and emphasis on light surfaces */
  --color-ink-body: var(--grey-700); /* running text on light surfaces */
  --color-ink-muted: var(--grey-500); /* captions, notes, secondary text on light surfaces */
  --color-ink-on-dark: #ffffff; /* headings and text on dark and on blue surfaces */
  --color-ink-on-dark-body: rgba(255, 255, 255, 0.78); /* running text on dark surfaces */
  --color-ink-on-dark-muted: rgba(255, 255, 255, 0.72); /* captions on dark surfaces */
  --color-ink-on-accent-muted: rgba(255, 255, 255, 0.8); /* small secondary text on blue, 5.0:1 */

  --color-line: rgba(35, 35, 35, 0.12); /* hairline: cards, dividers, progress track */
  --color-line-strong: rgba(35, 35, 35, 0.24); /* list rules and table heads that must read as a line */
  --color-line-on-dark: rgba(255, 255, 255, 0.14); /* hairline on dark surfaces */
  --color-line-on-accent: rgba(255, 255, 255, 0.2); /* hairline on blue */
  --color-line-tint: rgba(58, 65, 228, 0.15); /* border of tinted surfaces: decision box */

  --color-accent: var(--blue-500); /* labels, chapter numbers, links, buttons, focus, active step, progress */
  --color-accent-hover: var(--blue-600); /* hover and pressed state of blue fills */
  --color-accent-on-dark: var(--blue-300); /* labels, numbers and rules on dark surfaces, never on blue */
  --color-negative: var(--red-600); /* error text and invalid fields */

  /* ---------- Layer 2: type ---------- */

  --font-sans: 'Montserrat', Arial, sans-serif; /* the one typeface for page text */

  --weight-regular: 400; /* running text */
  --weight-medium: 500; /* reflection, quotes */
  --weight-semibold: 600; /* headings, nav, buttons */
  --weight-bold: 700; /* labels */

  --text-h1: clamp(48px, 6vw, 96px); /* page title in a case hero */
  --text-h1-page: clamp(30px, 3.6vw, 48px); /* page title on About, Talks, Publications, legal pages */
  --text-h2: clamp(34px, 4.4vw, 64px); /* chapter heading */
  --text-h3: clamp(26px, 2.6vw, 36px); /* sub-heading inside a chapter */
  --text-h4: clamp(20px, 1.8vw, 24px); /* small titles: decision, insight, card */
  --text-quote: clamp(22px, 2.2vw, 30px); /* key insight and statement lines */
  --text-stat: clamp(40px, 4.4vw, 64px); /* figures in a number row */
  --text-lead: clamp(18px, 1.45vw, 22px); /* hero lead and chapter intro */
  --text-body: clamp(17px, 1.25vw, 18px); /* running text */
  --text-small: 15px; /* card text, lists in exhibits */
  --text-caption: 13px; /* figcaption and footnotes */
  --text-label: 12px; /* chapter label, uppercase */
  --text-micro: 11px; /* fact labels, tab heads; smallest text outside mockups */

  --leading-h1: 1.02;
  --leading-h1-page: 1.15;
  --leading-h2: 1.08;
  --leading-h3: 1.15;
  --leading-h4: 1.25;
  --leading-stat: 1;
  --leading-quote: 1.3;
  --leading-label: 1.4;
  --leading-caption: 1.5;
  --leading-lead: 1.55;
  --leading-small: 1.6;
  --leading-body: 1.65;

  --tracking-heading: -0.04em; /* H1, H2, figures */
  --tracking-h3: -0.03em; /* H3, H4, quote */
  --tracking-ui: -0.0167em; /* nav and footer: -0.2px at 12, -0.27px at 16, -0.3px at 18 */
  --tracking-label: 0.12em; /* uppercase labels */

  /* ---------- Layer 2: space and layout ---------- */

  --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-section: clamp(88px, 10vw, 160px); /* top and bottom of a chapter section */
  --space-block: clamp(48px, 6vw, 88px); /* between intro and exhibit inside a chapter */
  --space-card: clamp(24px, 3vw, 40px); /* inner padding of cards */
  --space-intro: clamp(28px, 4vw, 48px); /* heading to its intro copy when stacked */

  --container: 1440px; /* outer width of nav, content, footer */
  --gutter: 16px; /* page margin: 16, 24 from 640 px, 48 from 1024 px */
  --content-width: min(100% - 2 * var(--gutter), 1344px); /* content edge = edge of logo and navigation */
  --measure: 760px; /* longest line of running text */
  --measure-narrow: 620px; /* lead and intro paragraphs */
  --tap-min: 44px; /* smallest touch target */
  --nav-height: 59px; /* fixed navigation; the sticky chapter bar docks below it */
  --scroll-offset: calc(var(--nav-height) + 72px); /* jump targets land below the navigation and the sticky chapter bar */

  /* ---------- Layer 2: shape ---------- */

  --radius-sm: 8px; /* inputs, chips, small media */
  --radius-md: 12px; /* images and mockup frames */
  --radius-lg: 16px; /* cards */
  --radius-pill: 999px; /* buttons and pills */
  --radius-round: 50%; /* numbered circles, icon buttons */

  --shadow-button: 0 2px 8px rgba(0, 0, 0, 0.1); /* white pill button at rest */
  --shadow-button-hover: 0 4px 12px rgba(0, 0, 0, 0.15); /* white pill button on hover */
  --shadow-exhibit: 0 24px 60px rgba(29, 36, 41, 0.12); /* product frames and mockups only, never cards */
  --shadow-dialog: 0 24px 80px rgba(29, 36, 41, 0.35); /* dialogs */

  --focus-width: 3px; /* focus ring in --color-accent */
  --focus-offset: 3px;
  --focus-halo: 0 0 0 3px #ffffff; /* keeps the ring visible on blue and dark */

  /* ---------- Layer 2: motion ---------- */

  --dur-fast: 200ms; /* hover colour, small state changes */
  --dur-base: 300ms; /* nav, menus, underline */
  --dur-slow: 450ms; /* card duotone, opening panels, iteration steps */
  --dur-reveal: 600ms; /* scroll reveal */
  --ease-standard: ease;
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1); /* reveals, entering elements, iteration stage */
  --ease-emphasized: cubic-bezier(0.2, 0, 0.2, 1); /* project card zoom and reveal */
  --reveal-distance: 24px;

  /* ---------- Layer 2: stacking ---------- */

  --z-raised: 1; /* text over an image */
  --z-sticky: 40; /* sticky chapter bar, below the navigation */
  --z-nav: 50; /* fixed navigation */
  --z-skip: 100; /* skip link */
  --z-overlay: 9998; /* mobile menu */

  /* ---------- Layer 3: project accent ---------- */

  --case-accent: var(--color-accent); /* project colour for exhibits and graphics */
  --case-accent-on-dark: var(--color-accent-on-dark); /* project colour on dark grounds */
  --case-accent-surface: var(--color-surface-alt); /* tinted chapter surface, at most two per page */
  --case-accent-dark: var(--color-surface-dark); /* dark project chapter, at most two per page */

  /* ---------- Former names, kept so older markup and the Cockpit build keep working ---------- */

  --primary-blue: var(--color-accent);
  --portfolio-blue: var(--color-accent);
  --portfolio-blue-on-dark: var(--color-accent-on-dark);
  --case-ink: var(--color-ink);
  --case-muted: var(--color-ink-muted);
  --case-line: var(--color-line);
  --case-dark: var(--color-surface-dark);
  --case-font: var(--font-sans);
  --case-h1-size: var(--text-h1);
  --case-h1-leading: var(--leading-h1);
  --case-h2-size: var(--text-h2);
  --case-h2-leading: var(--leading-h2);
  --case-heading-weight: var(--weight-semibold);
  --case-heading-tracking: var(--tracking-heading);
  --case-intro-copy-gap: var(--space-intro);
}

@media (max-width: 767.98px) {
  :root {
    --nav-height: 91px;
  }
}

@media (min-width: 640px) {
  :root {
    --gutter: 24px;
  }
}

@media (min-width: 1024px) {
  :root {
    --gutter: 48px;
  }
}