/* ==========================================================================
   stw-craft — theme.css
   Contract 1.0.0. Layer 1 primitives are theme-private; sections consume only
   the Layer 2 semantic tokens. See DESIGN.md for the reasoning.
   ========================================================================== */

@font-face {
  font-family: 'Archivo';
  src: url('./fonts/archivo-var.woff2') format('woff2');
  font-weight: 500 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('./fonts/inter-var.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* --- Layer 1: primitives (theme-private) ------------------------------- */
  --navy-900: #051d3e;
  --navy-800: #082650;
  --ink-950: #182a45;
  --slate-600: #49586d;
  --slate-200: #d8e0ea;
  --tint-50: #f2f5f9;
  --paper: #ffffff;
  --blue-600: #1366b0;
  --blue-700: #0e5192;
  --blue-ice: #eef4fb;

  /* --- Layer 2: semantic (the contract) ---------------------------------- */

  /* Colour roles */
  --color-surface: var(--paper);
  --color-surface-alt: var(--tint-50);
  --color-surface-raised: var(--paper);
  --color-surface-inverse: var(--navy-800);
  --color-ink: var(--ink-950);
  --color-ink-muted: var(--slate-600);
  --color-ink-inverse: var(--blue-ice);
  --color-accent: var(--blue-600);
  --color-accent-hover: var(--blue-700);
  --color-accent-ink: #ffffff;
  --color-border: var(--slate-200);
  --color-focus: var(--blue-600);

  /* Typography */
  --font-display: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: ui-monospace, 'SF Mono', 'Cascadia Mono', Consolas, monospace;

  --text-xs: clamp(0.79rem, 0.77rem + 0.08vw, 0.84rem);
  --text-sm: clamp(0.89rem, 0.86rem + 0.12vw, 0.97rem);
  --text-md: clamp(1rem, 0.96rem + 0.18vw, 1.13rem);
  --text-lg: clamp(1.13rem, 1.07rem + 0.26vw, 1.31rem);
  --text-xl: clamp(1.27rem, 1.18rem + 0.38vw, 1.55rem);
  --text-2xl: clamp(1.43rem, 1.3rem + 0.55vw, 1.86rem);
  --text-3xl: clamp(1.6rem, 1.42rem + 0.82vw, 2.33rem);
  --text-4xl: clamp(1.8rem, 1.53rem + 1.2vw, 2.9rem);
  --text-5xl: clamp(2.03rem, 1.6rem + 1.9vw, 3.73rem);
  --text-6xl: clamp(2.28rem, 1.6rem + 3vw, 4.66rem);

  --leading-tight: 1.12;
  --leading-base: 1.55;
  --leading-loose: 1.75;

  --tracking-tight: -0.01em;
  --tracking-base: 0;
  --tracking-wide: 0.08em;

  --weight-body: 400;
  --weight-medium: 600;
  --weight-bold: 700;
  --weight-display: 700;

  --display-transform: none;
  --display-tracking: -0.015em;

  --eyebrow-transform: uppercase;
  --eyebrow-tracking: 0.14em;
  --eyebrow-weight: 600;

  /* Spacing & rhythm — airy */
  --space-3xs: clamp(0.25rem, 0.24rem + 0.05vw, 0.31rem);
  --space-2xs: clamp(0.5rem, 0.47rem + 0.1vw, 0.63rem);
  --space-xs: clamp(0.75rem, 0.71rem + 0.16vw, 0.94rem);
  --space-sm: clamp(1rem, 0.94rem + 0.22vw, 1.25rem);
  --space-md: clamp(1.5rem, 1.4rem + 0.35vw, 1.88rem);
  --space-lg: clamp(2rem, 1.86rem + 0.5vw, 2.5rem);
  --space-xl: clamp(3rem, 2.75rem + 0.85vw, 3.75rem);
  --space-2xl: clamp(4rem, 3.6rem + 1.4vw, 5.5rem);
  --space-3xl: clamp(5.5rem, 4.9rem + 2.2vw, 7.75rem);

  --section-space: clamp(5rem, 3.5rem + 7vw, 9.8rem);
  --section-space-lg: clamp(6rem, 4.2rem + 8.5vw, 12rem);
  --flow-space: clamp(1rem, 0.94rem + 0.22vw, 1.25rem);
  --grid-gap: clamp(1.5rem, 1.3rem + 0.8vw, 2.5rem);

  /* Layout */
  --container-content: 44rem;
  --container-default: 72rem;
  --container-wide: 84rem;
  --container-pad: clamp(1.25rem, 1rem + 2vw, 3rem);

  /* Shape, borders, elevation */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-full: 999px;
  --border-width: 1px;
  --shadow-sm: 0 1px 2px rgba(5, 29, 62, 0.07);
  --shadow-md: 0 6px 18px rgba(5, 29, 62, 0.09);
  --shadow-lg: 0 20px 48px rgba(5, 29, 62, 0.14);

  /* Motion — calm, settled */
  --duration-fast: 0.2s;
  --duration-base: 0.55s;
  --duration-slow: 0.9s;
  --ease-standard: cubic-bezier(0.25, 0.1, 0.25, 1);
  --ease-emphasis: cubic-bezier(0.19, 1, 0.22, 1);
  --reveal-distance: 1.5rem;
  --reveal-stagger: 0.09s;

  /* Optional effects — all off: the photography and the type carry it */
  --bg-texture: none;
  --accent-gradient: none;
  --image-treatment: none;
  --clip-feature: none;
}