/* ==========================================================================
   Chipira — Design Tokens
   Editorial Luxury system (FLAT). One warm paper canvas under every section
   of every page — no bone/warm/ink bands, no gradients, no shadows, no blur,
   and no rule where two sections meet. Graphite ink, one quiet
   interconnect-gold accent. All values AA-verified against the paper.
   Rebrand = change --accent-* only.
   ========================================================================== */

:root {
  /* ---- Typefaces ---------------------------------------------------- */
  /* Fraunces carries the editorial voice: a variable old-style serif with
     real optical sizing, so a 6rem headline and a 1rem caption are drawn for
     the sizes they are set at. Commissioner carries running and interface
     text on a low-contrast humanist skeleton, and Ubuntu Sans Mono carries
     bump pitches, die counts and yields. */
  --font-serif: "Fraunces", Georgia, "Times New Roman", serif;
  --font-sans: "Commissioner", -apple-system, BlinkMacSystemFont,
               "Helvetica Neue", Arial, sans-serif;
  --font-serif-text: "Fraunces", Georgia, serif;
  --font-mono: "Ubuntu Sans Mono", ui-monospace, Menlo, monospace;

  --font-display: var(--font-serif);
  --font-body: var(--font-sans);

  /* ---- Fluid type scale --------------------------------------------- */
  --fs-display: clamp(3rem, 1.6rem + 6.4vw, 6.5rem);
  --fs-h1: clamp(2.5rem, 1.6rem + 4vw, 4.5rem);
  --fs-h2: clamp(2rem, 1.4rem + 2.6vw, 3.25rem);
  --fs-h3: clamp(1.5rem, 1.2rem + 1.4vw, 2.125rem);
  --fs-h4: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --fs-deck: clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem);
  --fs-quote: clamp(1.75rem, 1.3rem + 2vw, 2.75rem);
  --fs-lead: clamp(1.125rem, 1.04rem + 0.45vw, 1.375rem);
  --fs-figure: clamp(2.5rem, 2rem + 2vw, 3.75rem);
  --fs-body: 1.0625rem;
  --fs-body-lg: 1.1875rem;
  --fs-small: 0.875rem;
  --fs-kicker: 0.75rem;

  /* ---- Paper / canvas ------------------------------------------------ */
  --paper: #faf8f3;            /* the one canvas, under every section */
  --paper-bone: var(--paper);
  --paper-warm: var(--paper);
  --paper-ink: var(--paper);

  --surface: #ffffff;
  --surface-bone: #f4f1ea;
  --surface-ink: #22201a;

  /* ---- Ink text ramp ------------------------------------------------- */
  --ink: #16150f;
  --text-primary: #221f18;
  --text-secondary: #4a463c;
  --text-muted: #6a6456;        /* AA (>=4.9:1) on every paper tone */
  --text-faint: #9b9484;        /* decorative only — never real content */
  --text-on-ink: #f0ece2;
  --text-on-ink-muted: #a9a08b;
  --text-on-accent: #ffffff;

  /* ---- Hairlines (INSIDE compositions only, never between sections) --- */
  --rule-subtle: rgba(22, 21, 15, 0.09);
  --rule-default: rgba(22, 21, 15, 0.17);
  --rule-strong: rgba(22, 21, 15, 0.32);
  --rule-on-ink: rgba(240, 236, 226, 0.18);
  --rule-on-ink-strong: rgba(240, 236, 226, 0.34);
  --ring: #7a5230;

  /* ---- Accent — one quiet interconnect gold -------------------------- */
  --accent: #7a5b18;
  --accent-hover: #8d6b1e;
  --accent-press: #654b13;
  --accent-soft: rgba(122, 91, 24, 0.10);
  --accent-on-ink: #c9a961;
  --gold: #9a7b2e;              /* decorative rules / marks only */

  /* ---- Semantic (muted, editorial) ----------------------------------- */
  --success: #3f6b43; --success-soft: rgba(63, 107, 67, 0.12);
  --warning: #8a5d15; --warning-soft: rgba(138, 93, 21, 0.12);
  --error:   #9b2c2c; --error-soft:   rgba(155, 44, 44, 0.12);
  --info:    #2f5468; --info-soft:    rgba(47, 84, 104, 0.12);


  /* ---- Elevation (restrained) ---------------------------------------- */
  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: none;

  /* ---- Spacing — 4pt base / 8pt rhythm ------------------------------- */
  --space-0: 0;     --space-1: 4px;   --space-2: 8px;   --space-3: 12px;
  --space-4: 16px;  --space-5: 20px;  --space-6: 24px;  --space-8: 32px;
  --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px;
  --space-24: 96px; --space-28: 112px; --space-32: 128px; --space-40: 160px;
  --space-48: 192px; --space-56: 224px;

  /* ---- Radii — luxury leans crisp ------------------------------------ */
  --radius-sm: 3px; --radius-md: 6px; --radius-lg: 10px; --radius-xl: 14px;
  --radius-pill: 999px;

  /* ---- Containers & editorial measures ------------------------------- */
  --container-text: 680px;
  --container-md: 840px;
  --container-lg: 1040px;
  --container-xl: 1200px;
  --container-2xl: 1360px;
  --margin: clamp(24px, 7vw, 120px);

  /* ---- Section rhythm ------------------------------------------------ */
  --section-y: clamp(80px, 11vw, 176px);
  --section-y-lg: clamp(112px, 15vw, 240px);
  --stack: clamp(16px, 2vw, 24px);
  --col-gap: clamp(24px, 4vw, 72px);

  /* ---- Grid ---------------------------------------------------------- */
  --grid-cols: 12;
  --grid-gap: var(--col-gap);

  /* ---- Motion — unhurried, editorial --------------------------------- */
  --dur-fast: 200ms;
  --dur-base: 360ms;
  --dur-slow: 560ms;
  --dur-slower: 900ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-editorial: cubic-bezier(0.22, 0.61, 0.36, 1);

  --nav-h: 72px;
}

/* ==========================================================================
   Optional ink-dark theme. Warm light remains the default identity.
   ========================================================================== */
[data-theme="dark"] {
  --paper: #16150f;            /* the one canvas in this theme too */
  --paper-bone: var(--paper);
  --paper-warm: var(--paper);
  --paper-ink: var(--paper);
  --surface: #1b1912;
  --surface-bone: #221f18;
  --surface-ink: #100f0b;

  --ink: #f4efe4;
  --text-primary: #ece7da;
  --text-secondary: #cac4b3;
  --text-muted: #a49c88;
  --text-faint: #7b7463;
  --text-on-ink: #f0ece2;
  --text-on-ink-muted: #a9a08b;

  --rule-subtle: rgba(243, 239, 230, 0.08);
  --rule-default: rgba(243, 239, 230, 0.18);
  --rule-strong: rgba(243, 239, 230, 0.34);
  --ring: #c9a961;

  --accent: #c9a961;
  --accent-hover: #d8bb79;
  --accent-press: #b3934c;
  --accent-soft: rgba(201, 169, 97, 0.12);
  --gold: #c9a961;

  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: none;
}