/*
 * Caluminate — design tokens
 * Single source of truth for colour, type, spacing, radius and elevation.
 * Generated from DESIGN.md (Caluminate Design System, alpha). Both the marketing
 * site and the app import this file; edit DESIGN.md first, then mirror changes here.
 *
 * The system is one deliberate visual world: warm parchment, ink and gold, daylight.
 * One structural accent (gold) paints actions; sage/terracotta are semantic only;
 * navy is ink/depth only (the single dark "night island" — the wheel, an eclipse).
 *
 * Usage:
 *   background: var(--c-canvas); color: var(--c-ink-body);
 *   font: var(--t-heading-1); letter-spacing: var(--ls-heading-1);
 *   border: 1px solid var(--c-hairline); border-radius: var(--r-md);
 */

@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=EB+Garamond:ital,wght@0,400;0,500;1,400&family=Inter:wght@400;500;600&display=swap");

:root {
  /* ── Type families ─────────────────────────────────────────────── */
  --font-display: "Cormorant Garamond", "EB Garamond", Georgia, serif;   /* headings only */
  --font-reading: "EB Garamond", Georgia, "Times New Roman", serif;      /* long-form reading only */
  --font-ui: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; /* all UI chrome */

  /* ── Colour ────────────────────────────────────────────────────── */
  /* Structural accent — antique gold. The ONLY colour that paints an action. */
  --c-primary: #B8902E;         /* leaf gold — CTA fill, active/focus signal */
  --c-primary-ink: #7A6130;     /* old gold — gold text/links on parchment (5.8:1 ground, 5.1:1 tint) */
  --c-primary-hover: #A07E27;   /* pressed/hover gold fill */
  --c-primary-wash: #E3C57E;    /* selection, faint gold highlight */
  --c-on-primary: #2A1E12;      /* ink on a gold fill (gold is light — text stays dark) */

  /* Action — the primary CTA fill only. Kept separate from --c-primary so the
     button can run brighter than the hairlines, spines and marks that gold also
     paints. --c-action-edge is the boundary: gold sits at the same hue as the
     parchment, so a bright fill needs a darker edge to read as an object at all
     (3.6:1 on marketing ground, 3.2:1 on surface tint — clears WCAG 1.4.11). */
  --c-action: #D2A62B;          /* burnished gold — primary CTA fill and app button accent */
  --c-action-hover: #DCB035;    /* hover fill */
  --c-action-edge: #9E7718;     /* CTA boundary, and the hover/active edge base */
  --c-on-action: #2A1E12;       /* ink label on the gold fill (7.1:1) */

  /* Ground — warm daylight around parchment product and paper surfaces. */
  --c-marketing-ground: #FFFDF7; /* warm off-white — marketing-page field, never pure white */
  --c-canvas: #FBF7E8;           /* parchment — product and default card surface */
  --c-surface-tint: #F5EFD8;    /* vellum — featured/tinted panels (figure/ground by tint) */
  --c-sunken: #F1E7CE;          /* aged — insets, wells, quiet blocks */
  --c-on-night: #EFE7D0;        /* cream — text on the dark night island */

  /* Ink */
  --c-ink: #2A1E12;             /* sepia-black — headings */
  --c-ink-body: #5C4A35;        /* walnut — running text */
  --c-ink-muted: #6F6650;       /* stone — captions, meta, secondary (5.6:1 ground, 4.9:1 tint) */
  --c-ink-faint: #A99F8A;       /* ash — placeholders, disabled */
  --c-hairline: #DDD5C0;        /* 1px borders and dividers */
  --c-hairline-strong: #CBC0A4; /* stronger rules, input focus edge */

  /* Semantic — MEANING only, never a control. Traditional benefic / malefic. */
  --c-favourable: #87A06B;      /* sage — benefic, open windows, calm, growth */
  --c-favourable-deep: #6F7242; /* deep sage — sage text on parchment */
  --c-caution: #B5654A;         /* terracotta — malefic, care, difficult hours */
  --c-caution-deep: #9A4E38;    /* deep terracotta — caution text on parchment */

  /* Night — ink/depth ONLY. The single dark inversion; never a page ground. */
  --c-night: #0D1A2D;           /* midnight — the wheel core, eclipse bands */
  --c-night-soft: #14243A;      /* raised surface inside a night island */

  /* Presentation hardware — neutral materials for premium device mockups. */
  --c-device-frame: #34342F;    /* graphite body; physical object, never a UI surface */
  --c-device-edge: #AAA69C;     /* restrained metal edge */
  --c-device-glass: #11120F;    /* bezel and camera aperture */
  --c-device-highlight: #E8E3D8; /* directional edge reflection */

  /* ── Radius ────────────────────────────────────────────────────── */
  --r-xs: 4px;      /* inputs, chips, small tags */
  --r-sm: 6px;      /* buttons — squared-classical, deliberately NOT pill */
  --r-md: 10px;     /* cards, panels */
  --r-lg: 14px;     /* large containers, image/wheel wells */
  --r-pill: 9999px; /* small status dots and toggles ONLY — never a CTA */

  /* ── Spacing (4px base) ────────────────────────────────────────── */
  --s-xxs: 4px;
  --s-xs: 8px;
  --s-sm: 12px;
  --s-md: 16px;
  --s-lg: 24px;
  --s-xl: 32px;
  --s-xxl: 48px;
  --s-section: 88px;

  /* ── Elevation — hairline + faint layered light. No heavy shadows. ─ */
  --e-soft: 0 1px 2px rgba(42, 30, 18, .04), 0 6px 18px rgba(42, 30, 18, .06);
  --e-lifted: 0 2px 4px rgba(42, 30, 18, .05), 0 18px 44px rgba(42, 30, 18, .10);
  --e-device: 0 2px 2px rgba(42, 30, 18, .20), 0 24px 48px rgba(42, 30, 18, .22), 0 52px 92px rgba(42, 30, 18, .14);

  /* ── Type roles ────────────────────────────────────────────────── */
  /* font shorthand = weight size/line-height family; pair with the matching --ls-* */
  --t-display-xl: 500 72px/0.98 var(--font-display);
  --ls-display-xl: -0.5px;
  --t-display-lg: 500 52px/1.0 var(--font-display);
  --ls-display-lg: -0.4px;
  --t-heading-1: 500 40px/1.05 var(--font-display);
  --ls-heading-1: -0.25px;
  --t-heading-2: 500 30px/1.1 var(--font-display);
  --ls-heading-2: -0.2px;
  --t-heading-3: 600 23px/1.2 var(--font-display);
  --ls-heading-3: 0px;

  --t-reading-lg: 400 20px/1.55 var(--font-reading);
  --t-reading: 400 18px/1.6 var(--font-reading);

  --t-body-ui: 400 15px/1.5 var(--font-ui);
  --t-button: 600 13px/1.2 var(--font-ui);
  --ls-button: 1.1px;          /* uppercase */
  --t-eyebrow: 600 12px/1.35 var(--font-ui);
  --ls-eyebrow: 2px;           /* uppercase */
  --t-caption: 400 13px/1.45 var(--font-ui);
  --t-data: 500 14px/1.3 var(--font-ui);  /* pair with font-variant-numeric: tabular-nums */
}