/* ════════════════════════════════════════════════════════════════════════
   CLOUD GARDEN — DESIGN TOKENS
   The single source of truth for the whole brand: web, decks, documents,
   invoices, print. Change a value here and it propagates everywhere that
   loads this file. Mirrors BRAND.md §§4–9. Nothing here may contradict
   BRAND.md — if it must, amend BRAND.md first (see BRAND.md "Change control").

   Near-monochrome + EXACTLY ONE accent (laurel #4E6C37). No second hue, ever.
   One typeface (Söhne, twin Switzer). Two weights (400 / 500).
   ════════════════════════════════════════════════════════════════════════ */

:root{

  /* ── INK & PAPER ──────────────────────────────────────────────────────── */
  --cg-ink:#16181a;          /* cool near-black — primary text                */
  --cg-ink-soft:#2a2d2f;     /* secondary text on white                       */
  --cg-paper:#ffffff;        /* gallery white — the default canvas            */

  /* ── COOL-NEUTRAL GREY RAMP ───────────────────────────────────────────── */
  --cg-grey-700:#6e7270;     /* strong secondary text (BRAND.md §4.1)          */
  --cg-grey-650:#646865;     /* label / clause text                           */
  --cg-grey-500:#828684;     /* muted labels                                  */
  --cg-grey-400:#9a9e9c;     /* faint labels, index numerals                  */
  --cg-grey-300:#c7cbc9;     /* hairline (strong) · reversed "Garden" grey    */
  --cg-grey-200:#dee1df;     /* hairline (light) — the default rule colour    */
  --cg-grey-150:#e6e8e6;     /* faint divider                                 */
  --cg-grey-100:#eeefee;     /* faint surface (use sparingly)                 */
  --cg-grey-50:#f5f6f5;      /* barely-there fill                             */

  /* ── THE ONE ACCENT ───────────────────────────────────────────────────── */
  --cg-green:#4E6C37;        /* laurel — the single living signal.            */
                             /* LIGHT surfaces only as an ACCENT (§4.2).      */
                             /* No "deep laurel", no tint, no 2nd shade.      */

  /* ── LAUREL AS A SURFACE — "the living bed" (§4.6) ─────────────────────── */
  /* The one laurel at full strength as a section ground, carrying LIGHT text. */
  --cg-bed:var(--cg-green);
  --cg-bed-ink:#f3f4f3;      /* paper-white text on the bed (≈5.4:1, AA)      */
  --cg-bed-soft:#e9ece5;     /* secondary light text on the bed               */
  --cg-bed-line:rgba(243,244,243,.22);   /* hairline on the bed              */
  --cg-bed-line-soft:rgba(243,244,243,.12);

  /* ── DARK "SOIL" SURFACE (§3.5 / §4.2) ────────────────────────────────── */
  /* The cool near-black ground. NO laurel green ever appears here — the      */
  /* accent role is carried by paper-white / grey tonal contrast.            */
  --cg-dark:#15171a;
  --cg-dark-2:#1a1c1e;
  --cg-dark-ink:#f3f4f3;     /* paper-white text on soil                      */
  --cg-dark-soft:#b9bdbb;    /* secondary text on soil                        */
  --cg-dark-line:rgba(255,255,255,.12);
  --cg-dark-line-soft:rgba(255,255,255,.06);

  /* ── TYPEFACE — one family, two weights (§5) ──────────────────────────── */
  /* 'Soehne Test' is the TRIAL subset (mockup only — license real Söhne     */
  /* before launch/print, see type/README.md).                              */
  /* TEMP PREVIEW: Switzer pulled from the stack so the page renders in real */
  /* Söhne and the trial subset's missing glyphs (ä ö ü ß – · & %) visibly   */
  /* break to the system sans instead of being masked by the Switzer twin.   */
  /* REVERT before launch: re-add 'Switzer' after 'Soehne Test'.             */
  --cg-font:'Soehne Test',-apple-system,system-ui,sans-serif;
  --cg-weight-body:400;      /* Buch                                          */
  --cg-weight-strong:500;    /* Kräftig — wordmark, headings, emphasis        */

  /* tabular + lining figures so numerics align without a mono face (§5.4) */
  --cg-figs:"tnum" 1,"lnum" 1;

  /* ── TYPE SCALE (web px; scale proportionally for print) (§5.3) ────────── */
  --cg-fs-display:clamp(54px,12vw,150px);  /* wordmark / hero lockup         */
  --cg-fs-h1:clamp(40px,5vw,60px);
  --cg-fs-h2:clamp(28px,4vw,40px);
  --cg-fs-h3:clamp(20px,2.4vw,24px);
  --cg-fs-lede:clamp(18px,1.6vw,22px);
  --cg-fs-body:16px;
  --cg-fs-small:13px;
  --cg-fs-label:11px;        /* tracked uppercase micro-label                 */

  --cg-track-display:-.028em;
  --cg-track-h1:-.02em;
  --cg-track-h2:-.02em;
  --cg-track-h3:-.015em;
  --cg-track-wordmark:-.018em;   /* "Cloud Garden" Title Case                 */
  /* the three sanctioned tracked-uppercase tracks — snap every label to one of these */
  --cg-track-label-micro:.16em;  /* micro caption / contact line              */
  --cg-track-label:.24em;        /* standard uppercase label                  */
  --cg-track-label-wide:.34em;   /* section eyebrow                           */

  --cg-lh-tight:1.05;
  --cg-lh-snug:1.2;
  --cg-lh-body:1.6;

  /* ── LAYOUT & SPACING ─────────────────────────────────────────────────── */
  --cg-wrap:1200px;                       /* content column max-width         */
  --cg-gutter:clamp(22px,5vw,48px);       /* page side padding               */
  --cg-section:clamp(96px,13vw,180px);    /* vertical section rhythm          */
  /* 8-pt spacing scale for components, tables, stationery */
  --cg-space-1:4px;  --cg-space-2:8px;   --cg-space-3:12px; --cg-space-4:16px;
  --cg-space-5:24px; --cg-space-6:32px;  --cg-space-7:48px; --cg-space-8:64px;
  --cg-space-9:96px;

  /* ── HAIRLINES & RADII ────────────────────────────────────────────────── */
  --cg-hairline:1px;
  --cg-rule:var(--cg-grey-200);           /* default rule colour             */
  --cg-rule-strong:var(--cg-grey-300);
  --cg-radius-sm:2px;                      /* keep geometry crisp — small radii */
  --cg-radius:3px;
  --cg-radius-tile:22.7%;                  /* the Kachel corner (of its side) */

  /* ── ELEVATION — cool shadows only, never colour (§8) ─────────────────── */
  --cg-shadow-1:0 1px 2px rgba(20,22,25,.05);
  --cg-shadow-2:0 1px 2px rgba(20,22,25,.04),0 18px 40px -28px rgba(20,22,25,.22);
  --cg-shadow-card:0 1px 2px rgba(20,22,25,.07),0 12px 26px -10px rgba(20,22,25,.28),0 34px 60px -28px rgba(20,22,25,.32);

  /* ── MOTION (§9) ──────────────────────────────────────────────────────── */
  --cg-ease:cubic-bezier(.22,.68,.2,1);          /* default, organic settle  */
  --cg-ease-mech:cubic-bezier(.65,.02,.18,1);    /* precise, institutional   */
  --cg-dur-fast:.2s;
  --cg-dur:.35s;
  --cg-dur-slow:.55s;

  /* ── LOCKUP geometry (the .lk component, §3) ──────────────────────────── */
  --cg-lk-gap:.34em;          /* mark ↔ wordmark gap (scales with size)       */
  --cg-lk-clear:.72em;        /* baked clear space ≈ one cap height           */
  --cg-mark-cap:1.42cap;      /* Kachel height vs wordmark cap height         */

  /* ── PRINT (mm; §4.4 / §11) ───────────────────────────────────────────── */
  --cg-bleed:3mm;
  --cg-logo-min-print:7mm;    /* minimum cap height in print                  */
}

/* The system has exactly two weights. Bold/strong map to Kräftig (500),
   never a synthesised faux-700. */
b,strong{font-weight:var(--cg-weight-strong)}
em{font-style:normal}  /* no italics in the system (§5.4) */