/* ==========================================================================
   Dispatch design tokens — CSS mirror of /design-tokens.json
   SHARED: structural DNA used by every Dispatch property. Change with care.
   THEME:  this property's expression (colour, type families, motif).
   Keep this file in sync with design-tokens.json.
   ========================================================================== */

:root {
  /* ---------- SHARED ---------------------------------------------------- */

  /* Spacing — 4px base */
  --space-0: 0rem;
  --space-1: 0.25rem;  /*   4 */
  --space-2: 0.5rem;   /*   8 */
  --space-3: 0.75rem;  /*  12 */
  --space-4: 1rem;     /*  16 */
  --space-5: 1.5rem;   /*  24 */
  --space-6: 2rem;     /*  32 */
  --space-7: 3rem;     /*  48 */
  --space-8: 4rem;     /*  64 */
  --space-9: 6rem;     /*  96 */
  --space-10: 8rem;    /* 128 */
  --space-11: 10rem;   /* 160 */

  /* Rhythm — fluid 360px → 1680px */
  --gutter: clamp(1.25rem, 0.091rem + 5.152vw, 5.5rem);
  --section-pad-y: clamp(4rem, 2.909rem + 4.848vw, 8rem);
  --section-gap: clamp(2.5rem, 1.818rem + 3.03vw, 5rem);
  --intro-gap: clamp(1.25rem, 0.773rem + 2.121vw, 3rem);
  --grid-gap: clamp(1.25rem, 0.909rem + 1.515vw, 2.5rem);

  /* Containers */
  --container-wide: 95rem;     /* 1520 */
  --container-default: 87.5rem;/* 1400 */
  --container-narrow: 62rem;   /*  992 */
  --measure: 42rem;            /*  672 */

  /* Radii — square by default */
  --radius-none: 0px;
  --radius-sm: 2px;
  --radius-round: 999px;
  --radius-surface: var(--radius-none);
  --radius-control: var(--radius-none);
  --radius-media: var(--radius-none);

  /* Borders */
  --border-hairline: 1px;
  --border-frame: 2px;
  --border-heavy: 6px;
  --frame-inset: 0.5rem;

  /* Type scale */
  --text-xs: 0.8125rem;
  --text-sm: 0.9375rem;
  --text-base: clamp(1rem, 0.966rem + 0.152vw, 1.125rem);
  --text-md: clamp(1.125rem, 1.091rem + 0.152vw, 1.25rem);
  --text-lg: clamp(1.1875rem, 1.136rem + 0.227vw, 1.375rem);
  --text-xl: clamp(1.25rem, 1.182rem + 0.303vw, 1.5rem);
  --text-2xl: clamp(1.5rem, 1.364rem + 0.606vw, 2rem);
  --text-3xl: clamp(1.75rem, 1.58rem + 0.758vw, 2.375rem);
  --text-4xl: clamp(2.25rem, 1.909rem + 1.515vw, 3.5rem);

  --leading-none: 1;
  --leading-tight: 1.15;
  --leading-snug: 1.3;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  --tracking-tight: -0.01em;
  --tracking-normal: 0em;
  --tracking-wide: 0.04em;
  --tracking-wider: 0.12em;
  --tracking-widest: 0.2em;

  /* Motion */
  --dur-instant: 100ms;
  --dur-fast: 160ms;
  --dur-base: 240ms;
  --dur-slow: 400ms;
  --dur-slower: 640ms;

  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in: cubic-bezier(0.55, 0, 1, 0.45);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-linear: linear;

  /* Shadows */
  --shadow-header: 0 1px 0 rgb(16 24 40 / 0.06), 0 6px 18px -10px rgb(16 24 40 / 0.18);
  --shadow-card: 0 2px 4px rgb(16 24 40 / 0.14), 0 8px 24px -12px rgb(16 24 40 / 0.22);
  --shadow-card-hover: 0 4px 8px rgb(16 24 40 / 0.12), 0 18px 36px -14px rgb(16 24 40 / 0.28);
  --shadow-media: 0 10px 24px -14px rgb(16 24 40 / 0.35);
  --shadow-tag: 0 10px 16px -8px rgb(16 24 40 / 0.35);
  --shadow-tag-hover: 0 14px 22px -10px rgb(16 24 40 / 0.35);
  /* The tag shadow at double the throw and pushed left, so it reads down the
     phone's left side as well as under it. Same navy tint and negative spread,
     so it still belongs to the same lighting as the buttons. */
  --shadow-phone: -20px 20px 32px -8px rgb(16 24 40 / 0.35);

  /* Header */
  --header-h: clamp(3.75rem, 3.477rem + 1.212vw, 4.75rem);   /* 60 → 76 */
  --logo-h: clamp(1.25rem, 1.114rem + 0.606vw, 1.75rem);     /* 20 → 28 */
  --text-nav: clamp(0.9375rem, 0.92rem + 0.076vw, 1rem);     /* 15 → 16 */
  --nav-link-pad-x: 1.125rem;
  --nav-indicator-h: 3px;

  /* Focus */
  --focus-ring-width: 2px;
  --focus-ring-offset: 3px;

  /* Layers */
  --z-backdrop: -2;
  --z-below: -1;
  --z-base: 0;
  --z-raised: 10;
  --z-sticky: 100;
  --z-overlay: 200;
  --z-modal: 300;
  --z-toast: 400;
  --z-skip: 1000;

  /* Components */
  --tag-tilt: 6deg;
  --tag-rotate-x: 16deg;
  --tag-rotate-y: -14deg;
  --tag-perspective: 40em;
  --tag-thickness: 0.3em;

  --conveyor-stage-h: clamp(14em, 36vh, 15em); /* cards paint ~13.1em; the rest is breathing room */
  --conveyor-perspective: 35em;
  --conveyor-card-w: 17.5em;
  --conveyor-card-radius: var(--radius-media);
  --conveyor-card-ratio: 4 / 3;
  --conveyor-duration: 36.8s;
  --conveyor-duration-reduced: 147.2s;
  --conveyor-fade: 18%;

  --veil-opacity: 1;

  --social-size: 2.5rem;      /* the circle */
  --social-glyph: 1.5625rem;  /* the mark inside it — deliberately unchanged */
  --portrait-size: clamp(9rem, 8.182rem + 3.636vw, 12rem);

  /* ---------- THEME: Dispatch Studio ------------------------------------ */

  /* Palette — navy confirmed by the owner 2026-09-14; the rest still provisional. */
  /* Brand navy. Declared as channels so the translucent variants below can
     reuse it — otherwise the hex and the rgb() copies drift apart, which is
     exactly what happened when this was eyeballed as #1b2f5b. */
  --color-ink-rgb: 22 49 88;
  --color-ink: rgb(var(--color-ink-rgb));
  --color-accent: #cfae7b;
  --color-accent-light: #dcc095;
  --color-accent-deep: #b08e5c;
  --color-paper: #ffffff;
  --color-mist: #e3e6eb;
  --color-slate: #aeb6c3;
  --color-sand: #f4ecdf;
  --color-stone: #d6d2ca;

  /* Roles — components use these only */
  --color-bg: var(--color-paper);
  --color-text: var(--color-ink);
  --color-heading: var(--color-ink);
  --color-text-subtle: var(--color-slate);
  --color-accent-text: var(--color-accent);
  --color-accent-contrast: #ffffff;
  --color-surface-muted: var(--color-mist);
  --color-surface-inverse: var(--color-ink);
  --color-on-inverse: #ffffff;
  --color-frame-line: rgb(255 255 255 / 0.9);
  --color-header-bg: var(--color-paper);
  /* Navy, not slate: slate on white measured 2.04:1. The active link is still
     marked by its tan underline, so nothing is lost by the colours matching. */
  --color-nav: var(--color-ink);
  --color-nav-hover: var(--color-ink);
  --color-nav-active: var(--color-ink);
  --color-rule: #ffffff;
  --color-hairline: rgb(var(--color-ink-rgb) / 0.2);
  --color-field-bg: var(--color-paper);
  --color-field-border: rgb(var(--color-ink-rgb) / 0.35);
  --color-focus: var(--color-ink);
  --color-motif: var(--color-sand);
  --color-motif-on-muted: var(--color-stone);

  /* Type families (provisional) */
  --font-body: "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
  --font-display: var(--font-body);
  --font-label: var(--font-body);

  /* Motif */
  --motif-image: url("/assets/img/textures/topo.svg");
  --motif-size: clamp(50rem, 40rem + 30vw, 75rem); /* ≤1200px: some Chromium builds stop repeating larger SVG mask tiles */
}