/* Design tokens: the single source of truth for color, type, spacing, and depth.
   Direction: "Architect's Studio". Gallery white, hard ink hairlines, one
   International-Klein-Blue accent, grotesque display type, mono spec labels.
   Every other stylesheet consumes these custom properties. */

@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/bricolage-700-c0f84d57.woff2") format("woff2");
}

@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/assets/archivo-7a918f31.woff2") format("woff2");
}

@font-face {
  font-family: "Archivo";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/archivo-italic-ba4a9a9d.woff2") format("woff2");
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/plex-mono-500-deab9c2b.woff2") format("woff2");
}

:root {
  /* Color: gallery white, near-black ink, IKB accent */
  --paper: #fbfbf8;
  --paper-deep: #f1f1ea;
  --paper-card: #ffffff;
  --ink: #101010;
  --ink-soft: #52524c;
  --accent: #2b3cff;
  --accent-deep: #1e2bd4;
  --accent-soft: #8b96ff;
  --line: #dcdcd2;
  --line-strong: #101010;

  /* Type */
  --font-display: "Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", "SF Mono", Menlo, monospace;
  --text-xs: 0.8125rem;
  --text-sm: 0.9375rem;
  --text-base: 1.0625rem;
  --text-lg: 1.25rem;
  --text-xl: clamp(1.375rem, 1.1rem + 1.2vw, 1.75rem);
  --text-h2: clamp(1.9rem, 1.4rem + 2.2vw, 2.9rem);
  --text-h1: clamp(2.5rem, 1.6rem + 4.6vw, 4.4rem);

  /* Spacing scale */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;
  --space-9: 7rem;

  /* Depth and shape: hard edges, flat offset shadows */
  --radius-sm: 4px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-pill: 10px;
  --border-hard: 1.5px solid var(--line-strong);
  --shadow-soft: 4px 4px 0 rgba(16, 16, 16, 0.08);
  --shadow-deep: 8px 8px 0 rgba(16, 16, 16, 0.1);

  /* Layout */
  --container: 68rem;
  --container-narrow: 44rem;
  /* The sticky site header's resting height (wordmark/buttons plus
     space-3 padding-block plus the hairline). Anything that pins itself
     below the header sizes against this rather than guessing. */
  --header-h: 3.875rem;
  /* Everything the dashboard puts between the site header and the
     workspace: .dash-page's top padding plus the .dash-bar greeting row
     and its margin. The rail subtracts it so the rail, and the render
     button pinned to its foot, fit the first screen at rest. Keep in
     step with .dash-page / .dash-bar in auth.css. */
  --dash-chrome: 4.5rem;
}