/*
  California Drawers - design tokens
  ------------------------------------
  Palette rationale:
  - Ink (#171512): near-black with a warm olive undertone - reads as
    machined steel under shop light, not pure black on a screen.
  - Paper (#F2F0EB): cool-leaning off-white (greyer than cream) so the
    page feels like a drafting sheet, not a barn-wood brochure.
  - Accent (#A8551A): saturated maple amber / russet - the only warm
    punch, reserved for CTAs, active states, and wood callouts.
  - Rule (#C9C4BB) and muted (#5A564F): hairline geometry and secondary
    copy. Muted-on-paper clears WCAG AA (~5.4:1). Ink-on-paper and
    paper-on-ink clear AAA. Paper-on-accent-deep clears AA for UI text.
*/

/* -- Font faces (self-hosted, OFL) -- */
@font-face {
  font-family: "Instrument Sans";
  src: url("../fonts/InstrumentSans-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Instrument Sans";
  src: url("../fonts/InstrumentSans-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Instrument Sans";
  src: url("../fonts/InstrumentSans-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/IBMPlexMono-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/IBMPlexMono-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  /* -- Color -- */
  --color-ink: #171512;
  --color-paper: #f2f0eb;
  --color-accent: #a8551a;
  --color-accent-deep: #8b4414;
  --color-rule: #c9c4bb;
  --color-muted: #5a564f;
  --color-paper-elevated: #faf9f6;
  --color-ink-soft: #2e2b26;

  /* Species swatch gradients (photographic stand-ins until real samples) */
  --wood-maple-a: #e8d4b0;
  --wood-maple-b: #c9a66b;
  --wood-maple-c: #a67c42;
  --wood-birch-a: #f0e6d2;
  --wood-birch-b: #d4c4a0;
  --wood-birch-c: #b8a078;
  --wood-beech-a: #e0c9a0;
  --wood-beech-b: #c4a06a;
  --wood-beech-c: #9a7548;
  --wood-cherry-a: #c48a62;
  --wood-cherry-b: #a05a38;
  --wood-cherry-c: #7a3d28;
  --wood-mahogany-a: #8b4a32;
  --wood-mahogany-b: #6b3020;
  --wood-mahogany-c: #4a1e14;
  --wood-oak-a: #d4b896;
  --wood-oak-b: #b8925e;
  --wood-oak-c: #8f6a3c;
  --wood-walnut-a: #6b4a32;
  --wood-walnut-b: #4a3020;
  --wood-walnut-c: #2e1c12;

  /* Semantic aliases */
  --color-bg: var(--color-paper);
  --color-fg: var(--color-ink);
  --color-fg-muted: var(--color-muted);
  --color-border: var(--color-rule);
  --color-focus: var(--color-accent);

  /* -- Typography -- */
  --font-sans: "Instrument Sans", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", "SF Mono", "Consolas", ui-monospace, monospace;

  /* Fluid type scale - hero reaches ≥8vw on desktop */
  --text-xs: clamp(0.75rem, 0.7rem + 0.2vw, 0.8125rem);
  --text-sm: clamp(0.875rem, 0.82rem + 0.25vw, 0.9375rem);
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --text-md: clamp(1.125rem, 1.05rem + 0.35vw, 1.25rem);
  --text-lg: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --text-xl: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  --text-2xl: clamp(1.875rem, 1.3rem + 2vw, 2.75rem);
  --text-3xl: clamp(2.25rem, 1.4rem + 3vw, 3.5rem);
  --text-display: clamp(2.75rem, 1.5rem + 8vw, 7.5rem);

  --leading-tight: 1.05;
  --leading-snug: 1.25;
  --leading-normal: 1.55;
  --leading-relaxed: 1.7;

  --tracking-tight: -0.03em;
  --tracking-display: -0.04em;
  --tracking-wide: 0.08em;
  --tracking-label: 0.12em;

  --measure: 65ch;
  --measure-narrow: 42ch;

  /* -- Spacing scale (4px base) -- */
  --space-3xs: 0.25rem;   /* 4 */
  --space-2xs: 0.5rem;    /* 8 */
  --space-xs: 0.75rem;    /* 12 */
  --space-sm: 1rem;       /* 16 */
  --space-md: 1.5rem;     /* 24 */
  --space-lg: 2rem;       /* 32 */
  --space-xl: 3rem;       /* 48 */
  --space-2xl: 4.5rem;    /* 72 */
  --space-3xl: 6rem;      /* 96 */
  --space-4xl: 9rem;      /* 144 */
  --space-5xl: 12rem;     /* 192 */

  /* -- Layout -- */
  --grid-columns: 12;
  --grid-gutter: clamp(0.75rem, 0.5rem + 1.2vw, 1.5rem);
  --grid-max: 72rem; /* 1152px */
  --grid-margin: clamp(1rem, 3.5vw, 3rem);
  --nav-height: 4.5rem;
  --nav-height-solid: 3.75rem;
  --rule-width: 1px;
  --radius-none: 0;
  --radius-sm: 2px;
  --radius-md: 4px;

  /* -- Motion -- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast: 180ms;
  --duration-base: 320ms;
  --duration-slow: 560ms;
  --duration-max: 900ms;

  /* -- Controls -- */
  --control-height: 2.75rem;
  --control-height-lg: 3.25rem;
  --focus-ring: 0 0 0 2px var(--color-paper), 0 0 0 4px var(--color-accent);
}