/* ============================================================================
   OsmO BRAND LIBRARY — the ONE place getosmo.app's look is defined.

   Every colour, font family, corner radius, shadow and gradient on the website
   reads a custom property from this file. Change a value here and every page
   follows. Nothing else under website/ may write a raw colour, a typeface name,
   an @font-face, a radius, a shadow or a gradient: scripts/validate-brand-tokens.py
   refuses it.

   Source: the owner's Claude Design file "Home Light"
   (docs/design/home-light/home-light.dc.html:36-50, gold primary button :72,
   light app panels :34). LIGHT ONLY (owner, 2026-10-14) — there is no dark branch.

   Shape (enforced by the brand_shape wall): only @font-face blocks, ONE :root{}
   and comments. Each token is declared once.

   Colours are channel TRIPLETS (--ink-rgb:26,23,20) plus an opaque form
   (--ink:rgb(var(--ink-rgb))). Alpha is rgba(var(--ink-rgb),.09); a canvas reads
   the triplet with getComputedStyle(...).getPropertyValue('--ink-rgb').
   theme-color metas and manifest.json must equal the hex of --bg-rgb (meta_drift).

   Every page loads this file FIRST:
     <link rel="stylesheet" href="/brand.css?v=<first 10 hex of sha256(brand.css)>" />
   After editing this file the gate prints the sed that refreshes that token.
   ============================================================================ */

/* ---------- fonts (self-hosted, website/fonts/) ---------- */
@font-face{font-family:"DM Sans";src:url("/fonts/dmsans-400.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"DM Sans";src:url("/fonts/dmsans-500.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"DM Sans";src:url("/fonts/dmsans-700.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Playfair Display";font-style:normal;font-weight:700;font-display:swap;src:url("/fonts/playfair-700.woff2") format("woff2")}
@font-face{font-family:"Playfair Display";font-style:italic;font-weight:600;font-display:swap;src:url("/fonts/playfair-italic-600.woff2") format("woff2")}

:root{
  /* ---------- colour channels (the only colour values on the site) ---------- */
  --bg-rgb:255,255,255;            /* page */
  --bg-2-rgb:250,248,243;          /* alternate band, footer (cream) */
  --surface-rgb:255,255,255;       /* card, app panel, field */
  --surface-2-rgb:247,243,234;     /* tinted card, list row, slab band */
  --ink-rgb:26,23,20;              /* headings, primary text */
  --ink-2-rgb:83,75,65;            /* body text */
  --ink-3-rgb:110,101,87;          /* secondary text */
  --accent-rgb:124,94,34;          /* links, eyebrows, highlighted words (deep brown-gold) */
  --accent-2-rgb:168,133,74;       /* secondary gold */
  --accent-deep-rgb:110,81,25;     /* darkest gold: end stop of --grad-text */
  --accent-tint-rgb:245,235,216;   /* gold-tinted chip / pill background */
  --ink-warm-rgb:74,59,38;         /* warm ink: middle stop of --grad-num */
  --fill-1-rgb:201,169,97;         /* top of the gold button fill */
  --fill-2-rgb:168,134,60;         /* bottom of the gold button fill */
  --on-fill-rgb:26,20,8;           /* text on the gold fill */
  --good-rgb:38,117,79;            /* design #2F8A62 darkened to #26754F: AA 4.5:1 for small text on white and on --good-tint */
  --good-tint-rgb:240,247,244;     /* --good at 7% on white, opaque */
  --bad-rgb:163,71,58;             /* design #B5533F darkened to #A3473A: AA 4.5:1 on white and on --bad-tint */
  --bad-tint-rgb:251,245,243;      /* --bad at 6% on white, opaque */
  --shadow-rgb:var(--ink-rgb);     /* every shadow is warm ink */

  /* Google Play logo artwork (official colours, not brand; do not restyle) */
  --mark-play-1-rgb:0,195,255;
  --mark-play-2-rgb:17,210,125;
  --mark-play-3-rgb:255,206,43;
  --mark-play-4-rgb:240,65,74;

  /* ---------- colour roles (home-light.dc.html:36-50) ---------- */
  --bg:rgb(var(--bg-rgb));
  --bg-2:rgb(var(--bg-2-rgb));
  --surface:rgb(var(--surface-rgb));
  --surface-2:rgb(var(--surface-2-rgb));
  --panel-bg:var(--surface);
  --foot-bg:var(--bg-2);
  --line:rgba(var(--ink-rgb),.09);
  --line-2:rgba(var(--ink-rgb),.16);
  --ink:rgb(var(--ink-rgb));
  --ink-2:rgb(var(--ink-2-rgb));
  --ink-3:rgb(var(--ink-3-rgb));
  --accent:rgb(var(--accent-rgb));
  --accent-2:rgb(var(--accent-2-rgb));
  --accent-tint:rgb(var(--accent-tint-rgb));
  --accent-line:rgba(var(--accent-rgb),.24);
  --on-fill:rgb(var(--on-fill-rgb));
  --good:rgb(var(--good-rgb));
  --good-tint:rgb(var(--good-tint-rgb));
  --good-line:rgba(var(--good-rgb),.28);
  --bad:rgb(var(--bad-rgb));
  --bad-tint:rgb(var(--bad-tint-rgb));
  --bad-line:rgba(var(--bad-rgb),.35);
  --nav-bg:rgba(var(--bg-rgb),.86);
  --hero-glow:rgba(var(--fill-1-rgb),.14);
  --scrim:rgba(var(--ink-rgb),.42);
  --field:var(--surface);
  --focus:rgba(var(--fill-2-rgb),.18);
  --on-solid:var(--surface);       /* text on a solid good/accent/bad chip */
  --mark-play-1:rgb(var(--mark-play-1-rgb));
  --mark-play-2:rgb(var(--mark-play-2-rgb));
  --mark-play-3:rgb(var(--mark-play-3-rgb));
  --mark-play-4:rgb(var(--mark-play-4-rgb));

  /* ---------- buttons (design default primaryButton: gold, :72 — 135deg, see --fill-btn) ---------- */
  --btn-bg:var(--fill-btn);
  --btn-ink:var(--on-fill);
  --btn-line:transparent;
  --btn2-bg:transparent;
  --btn2-ink:var(--ink);
  --btn2-line:rgba(var(--ink-rgb),.22);

  /* ---------- fonts ---------- */
  --font-sans:"DM Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;  /* body, headings, UI */
  --font-serif:"Playfair Display",Georgia,"Times New Roman",serif;            /* italic emphasis, quotes, big numerals */
  --font-read:var(--font-sans);    /* long-form article body: DM Sans (owner, 2026-10-14) */

  /* ---------- corner radius scale (D7: components snap to the nearest step) ---------- */
  --radius-1:2px;
  --radius-2:4px;
  --radius-3:8px;
  --radius-4:10px;
  --radius-5:12px;
  --radius-6:14px;
  --radius-7:16px;
  --radius-8:20px;
  --radius-9:24px;
  --radius-10:32px;
  --radius-device:38px;            /* phone mockup body */
  --radius-pill:9999px;

  /* ---------- shadow scale (D8) ---------- */
  --shadow-sm:0 1px 2px rgba(var(--shadow-rgb),.05),0 8px 20px -14px rgba(var(--shadow-rgb),.25);
  --shadow:0 1px 2px rgba(var(--shadow-rgb),.04),0 24px 48px -32px rgba(var(--shadow-rgb),.28);
  --shadow-lift:0 2px 4px rgba(var(--shadow-rgb),.05),0 34px 64px -30px rgba(var(--shadow-rgb),.34);
  --panel-shadow:0 44px 90px -44px rgba(var(--shadow-rgb),.55),0 0 0 1px rgba(var(--shadow-rgb),.04);
  --shadow-up:0 -10px 34px -18px rgba(var(--shadow-rgb),.25);              /* bottom store bar */
  --shadow-cta:0 10px 28px -12px rgba(var(--fill-2-rgb),.55);               /* gold glow under the gold button */
  --shadow-inset:inset 0 1px 0 rgba(var(--bg-rgb),.6),inset 0 0 0 1px rgba(var(--shadow-rgb),.05);
  --shadow-drop:0 1px 2px rgba(var(--shadow-rgb),.35);                      /* the only form valid in filter:drop-shadow() */
  --text-glow:0 0 46px rgba(var(--accent-2-rgb),.6);                         /* home "Silence." catch glow */

  /* ---------- gradient roles (D9) ---------- */
  --fill:linear-gradient(180deg,rgb(var(--fill-1-rgb)),rgb(var(--fill-2-rgb)));             /* design --fill (:40) */
  --fill-btn:linear-gradient(135deg,rgb(var(--fill-1-rgb)),rgb(var(--fill-2-rgb)));         /* gold primary button (:72) */
  --grad-text:linear-gradient(120deg,var(--accent-2),var(--accent) 55%,rgb(var(--accent-deep-rgb)));   /* LARGE text only (~3.4:1 at its light end) */
  --grad-num:linear-gradient(180deg,var(--ink),rgb(var(--ink-warm-rgb)) 60%,var(--accent));           /* big numerals */
  /* small gradient text: every stop is >= 4.5:1 on --bg (the acceptance suite checks it) */
  --shimmer:linear-gradient(100deg,var(--accent) 20%,rgb(var(--accent-deep-rgb)) 38%,rgb(var(--ink-warm-rgb)) 50%,rgb(var(--accent-deep-rgb)) 62%,var(--accent) 80%);
  --glow-top:radial-gradient(60% 55% at 50% 0%,var(--hero-glow),transparent 70%);
  --glow-corner:radial-gradient(900px 480px at 85% -120px,var(--hero-glow),transparent 70%);
  --glow-center:radial-gradient(50% 50% at 50% 50%,var(--hero-glow),transparent 70%);
  --rule-fade:linear-gradient(90deg,transparent,var(--accent-line),transparent);
  --surface-fade:linear-gradient(180deg,var(--surface-2),var(--surface));
  --scrim-fade:linear-gradient(180deg,rgba(var(--ink-rgb),0),rgba(var(--ink-rgb),.8));    /* legible caption over a photo / video */
  --grid:repeating-linear-gradient(0deg,rgba(var(--accent-rgb),.04) 0 1px,transparent 1px 96px),repeating-linear-gradient(90deg,rgba(var(--accent-rgb),.04) 0 1px,transparent 1px 96px);  /* .04: large --grad-text keeps 3:1 where two lines cross */
  /* masks: #000 here is alpha, not colour */
  --mask-fade-x:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  --mask-fade-y:linear-gradient(180deg,transparent,#000 8%,#000 92%,transparent);
  --mask-solid:linear-gradient(#000 0 0);
  --ring-conic:conic-gradient(from 210deg,rgb(var(--fill-1-rgb)),var(--accent-2),var(--accent),var(--accent-2),rgb(var(--fill-1-rgb)));

  /* ---------- LEGACY ALIASES ----------
     Names the kit, osmo.css and robot-edited pages already read. Value-less: each
     points at a role above, so the role stays the one place its value lives.
     Do not add values here; new code reads the role names. */
  --paper:var(--surface);
  --gold:var(--accent-2);
  --gold-deep:var(--accent);
  --gold-soft:var(--accent-2);
  --pill:var(--accent-2);          /* SOLID: osmo.css also feeds it to border-color */
  --pill-ink:var(--on-fill);
  --dot:var(--line-2);
  --display:var(--font-sans);
  --sans:var(--font-sans);
  --serif:var(--font-sans);        /* historic alias: headings use DM Sans */
  --serif-display:var(--font-serif);
  --cn-serif:var(--font-serif);
  --k-serif:var(--font-serif);
  --k-read:var(--font-read);
  --k-gold:var(--accent-2);
  --k-gold-lit:rgb(var(--fill-1-rgb));
  --k-gold-text:var(--accent);
  --k-grad:var(--grad-text);
  --k-card:var(--surface);
  --k-card-line:var(--line);
  --k-well:var(--surface-2);
  --k-good:var(--good);
  --k-bad:var(--bad);
  --k-mid:var(--accent);
  --k-s1:var(--accent-2);
  --k-s2:var(--good);
  --k-s3:var(--ink-3);
  --k-s4:var(--bad);
  --k-grid:var(--line);
  --k-axis:rgba(var(--ink-rgb),.45);
  --k-shadow:var(--shadow);
  --r:var(--radius-8);
  --r-lg:var(--radius-9);
}