/* Design tokens: the single source of truth for color, type, spacing, and
   depth. Direction: the relaunch world signed off on 2026-09-14
   (RELAUNCH.md section 13, tmp/design-canvas/Main.dc.html): a cool stone
   ground, one orange accent reserved for action and emphasis, deep navy
   panels as rhythm markers, Familjen Grotesk for display over Geist for
   text, soft offset shadows, the pill as the one button shape. Every
   other stylesheet consumes these custom properties. The app surfaces
   (workspace, designs, admin) inherit the palette and the faces here and
   are re-skinned in detail in R6. */

/* Self-hosted variable faces (CLAUDE.md: no third-party font CDN on the
   real page). Familjen Grotesk carries the 400 to 700 axis, Geist 300 to
   700; both fall back to the platform grotesk with real metrics. */
@font-face {
  font-family: "Familjen Grotesk";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/familjen-grotesk-43c48450.woff2") format("woff2");
}

@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("/assets/geist-faa79069.woff2") format("woff2");
}

/* The workspace's spec labels still read in mono until R6 (the marketing
   pages carry no mono, by the owner's read). */
@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: stone ground, near-black ink, one orange accent, navy depth */
  --paper: #eef0f3;
  --paper-deep: #e5e8ec;
  --paper-card: #ffffff;
  --ink: #0f1417;
  --ink-soft: #4b5560;
  --ink-mute: #5c6672;
  --accent: #c2410c;
  --accent-deep: #a33608;
  --accent-hover: #e25a1f;
  --ember: #ed6b24;
  --accent-soft: #ffd7c2;
  --loud: #ffd7c2;
  --deep: #14202a;
  --deep-2: #101a22;
  --footer: #0b1219;
  --tint: #e3e7ec;
  --line: #d8dde3;
  --line-strong: #0f1417;

  /* Type */
  --font-display: "Familjen Grotesk", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Geist", "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(2.125rem, 1.4rem + 2.6vw, 3.5rem);
  --text-h1: clamp(2.875rem, 1.6rem + 4.6vw, 5.25rem);

  /* 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: soft offset shadows, the pill, three corner sizes */
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-pill: 999px;
  --border-hard: 1px solid var(--line);
  --shadow-soft: 0 1px 2px rgba(15, 20, 23, 0.04), 0 12px 28px -16px rgba(20, 32, 42, 0.35);
  --shadow-deep: 0 1px 2px rgba(15, 20, 23, 0.04), 0 28px 64px -34px rgba(20, 32, 42, 0.5);
  --shadow-glow: 0 24px 46px -12px rgba(194, 65, 12, 0.68), 0 4px 10px -4px rgba(20, 32, 42, 0.3);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-sweep: cubic-bezier(0.65, 0, 0.35, 1);

  /* Layout */
  --container: 80rem;
  --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;
}