/* Rosco design tokens: one source for the marketing site and the tour.
   Brand guide: handoff/brand/rosco_brand_guidelines.md (§6 type, §7 colour).

   Prefixes, one per layer, so the two looks can never collide:
     --site-*  marketing site, page layer (headlines, copy, buttons)
     --ui-*    marketing site, product screens drawn from Shahar's designs
     --app-*   "How it works" page, faithful recreation of the real app's screens
   Scales shared by everything: --font-*, --text-*, --space-*, --radius-*, --shadow-*, --ease-*.
   The site build copies this file to site/assets/tokens.css. Edit it here only.
   2 Oct 2026: the tour became the site's How it works page, and its paper-and-moss look became the whole site's (--site-*).
   2 Oct 2026: an olive-and-yellow trial palette replaced the moss accents. 3 Oct 2026: back to moss (Shahar).
   The trial values are kept in the session scratchpad only; moss is the decided look. */

:root{
  /* ---------- fonts ---------- */
  --font-sans:'Outfit',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,monospace;

  /* ---------- site · page layer: paper, ink and moss (Shahar, 2 Oct 2026: the tour's green look, across the whole site) ---------- */
  --site-bg:#F2F0E9;          /* paper */
  --site-band:#E8EBDB;        /* green-tinted paper: "The problem" band */
  --site-surface:#F5F3EE;
  --site-card:#F7F6F1;
  --site-card-hover:#FAF9F5;
  --site-header-bg:rgba(242,240,233,.88);
  --site-ink:#242721;
  --site-ink-2:#3A3E35;
  --site-muted:#64695D;
  --site-label:#62675A;       /* 5.3:1 on paper, 4.7:1 on the band */
  --site-faint:#A3A797;
  --site-line:#D5D7CA;
  --site-line-strong:#C9CCBC;
  --site-line-hover:#AEB2A0;
  --site-card-line-hover:#BFC3B2;
  --site-moss:#40503A;        /* the accent: eyebrows, numerals, section labels, step progress */
  --site-lime:#D5DFB6;        /* lime: soft accents on ink, the lime bento tile, the headline highlighter, the manifesto's last line */
  --site-manifesto-dim:#8F9388;   /* manifesto words not yet reached, on ink: 4.8:1 (3 Oct 2026, was 3.25:1) */
  --desk-paper:#EEF2E1;           /* the paper reminder in the hero */
  --icon-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 22px 34px -16px rgba(36,39,33,.36),0 3px 8px rgba(36,39,33,.08);   /* the floating practice objects */
  --footer-mark:#31352D;           /* the giant wordmark, barely lifted off the ink footer */
  --footer-line:#3A3E35;   /* manifesto words not yet reached, on ink */
  --site-closing:#D8E0C2;     /* the closing call-to-action band */
  --site-cta:#40503A;         /* the main button: the only filled moss element on a page (isolation effect) */
  --site-cta-hover:#33402E;
  --site-white:#FFFFFF;
  --site-black:#000000;
  --site-gutter:32px;

  /* ---------- site · product screens ---------- */
  --ui-frame:#E7E6DC;
  --ui-frame-line:#D5D7CA;
  --ui-card:#FAFAF8;
  --ui-card-line:#E8E7E2;
  --ui-head:#F3F2EF;
  --ui-row-line:#EEEDE9;
  --ui-title-row:#F6F5F2;
  --ui-soft:#F7F7F5;
  --ui-field:#FFFFFF;
  --ui-field-line:#DEDDD8;
  --ui-empty:#F4F3F0;
  --ui-empty-line:#ECEBE7;
  --ui-segmented:#EFEEEA;
  --ui-hatch:#F7F6F3;
  --ui-image-line:#E3E2DD;
  --ui-dashed:#D4D3CE;
  --ui-connector:#CFCEC8;
  --ui-count:#E5E4E0;
  --ui-mark-line:#CFCEC9;
  --ui-mark-bg:#F1F0EC;
  --ui-mark-off:#C9C8C3;
  --ui-checkbox-line:#BDBCB6;
  --ui-toggle-line:#D5D4CE;
  --ui-toggle-hover:#B9B8B2;
  --ui-ink:#1A1A1A;
  --ui-ink-2:#3B3A37;
  --ui-muted:#5F5E59;
  --ui-label:#6A6964;
  --ui-faint:#AEADA8;
  --ui-grey:#6F6E69;
  --ui-white:#FFFFFF;
  --ui-black:#000000;
  /* status: meaning, never decoration */
  --ui-green:#2E7D4F; --ui-green-bg:#E7F3EC; --ui-green-line:#C6E1D0;
  --ui-won:#1F7A4C;
  --ui-amount-bg:#E9F3EC; --ui-amount-ink:#1F5136;
  --ui-red:#B42318; --ui-red-bar:#B3301F; --ui-red-bg:#FBECEA; --ui-red-line:#F1C9C4;
  --ui-blue:#2457E5; --ui-blue-bg:#EAF0FE; --ui-blue-line:#CBD8FA;
  --ui-amber:#96551A; --ui-amber-bg:#FCEFE0; --ui-amber-line:#F1D6B4; --ui-amber-solid:#8F5217; --ui-amber-dot:#C98A2B;
  --ui-purple:#5B3FC4; --ui-purple-bg:#EFEBFE; --ui-purple-line:#D8CFFB;
  --ui-navy:#22397A;
  /* data colours inside screens */
  --ui-project-indigo:#5B6CF0;
  --ui-project-orange:#D2491E;
  --ui-bar-2:#8C8B87; --ui-bar-3:#B4B3AE; --ui-bar-4:#D0CFCA;
  --ui-forecast:#B8B7B2; --ui-forecast-ink:#6F6E69;
  /* cursor and press ring */
  --ui-ring-line:#40503A;
  --ui-ring-fill:rgba(64,80,58,.12);

  /* ---------- How it works · the real app's screens (sampled from the reference screenshots) ---------- */
  --app-ink:#1A1A1A;
  --app-ink-2:#2A2A2A;
  --app-black:#000000;
  --app-white:#FFFFFF;
  --app-panel:#F5F5F3;
  --app-head:#F4F3EF;
  --app-subtabs:#FAFAF8;
  --app-total-row:#F7F6F3;
  --app-badge:#F0EFEB;
  --app-badge-line:#E6E5E0;
  --app-pill:#F2F1EE;
  --app-line:#E3E2DF;
  --app-row-line:#EDECE9;
  --app-field-line:#D1D2CD;
  --app-panel-line:#D9D8D4;
  --app-panel-field-line:#D4D0CD;
  --app-muted:#8A8984;
  --app-panel-label:#7C7B76;
  --app-excerpt:#7A7973;
  --app-icon:#6F6E69;
  --app-icon-dark:#5F5F5F;
  --app-icon-expand:#888782;
  --app-icon-faint:#9A9994;
  --app-icon-select:#A9A8A3;
  /* emphasis drawn over the screens (marker sweep, selected fields): the brand lime and moss, never a status colour */
  --app-highlight:#DCE5C3;
  --app-highlight-soft:#EEF2E1;
  --app-highlight-line:#40503A;
  --app-category-red:#D9534F;
  --app-task-done-line:#C9D1AE;
  --app-profit:#3A9A62;        /* the Profit column, as the Fees tab colours it (ref 08) */

  /* ---------- liquid glass (2 Oct 2026): translucent surfaces with a lit top edge; the sheen is light, not colour ---------- */
  --glass-fill:rgba(250,249,245,.56);          /* floating glass: header pill, moment cards, play buttons */
  --glass-fill-strong:rgba(250,249,245,.74);
  --glass-pane:rgba(255,255,255,.34);           /* resting glass: product frames, plan and hub cards */
  --glass-fill-dark:rgba(255,255,255,.08);      /* glass on ink */
  --glass-rim:rgba(255,255,255,.72);
  --glass-rim-soft:rgba(255,255,255,.4);
  --glass-blur:blur(20px) saturate(1.7);
  --glass-sheen:linear-gradient(180deg,rgba(255,255,255,.6),rgba(255,255,255,0) 46%);
  --glass-shadow:inset 0 1px 0 rgba(255,255,255,.85),inset 0 -1px 0 rgba(36,39,33,.05),0 14px 34px -14px rgba(36,39,33,.3),0 1px 3px rgba(36,39,33,.07);
  --light-lime:rgba(213,223,182,.62);           /* ambient light behind the page, for the glass to catch */
  --light-lime-soft:rgba(216,224,194,.45);
  --light-moss:rgba(64,80,58,.11);
  --cta-sheen:linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,0) 55%);
  --cta-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 8px 18px -10px rgba(64,80,58,.75);

  /* ---------- type scale (site) ---------- */
  --text-micro:10px;     /* image placeholder label */
  --text-2xs:12px;       /* phone table headings and captions: never smaller */
  --text-xs:12.5px;      /* mono labels, eyebrows, table headings, captions */
  --text-sm:14.5px;      /* small interface text, footer */
  --text-md:15.5px;      /* nav, buttons, subtitles */
  --text-base:16px;      /* table cells, secondary interface text */
  --text-lg:17px;        /* body text, inputs */
  --text-xl:18px;        /* bullets, list text */
  --text-2xl:20px;       /* large interface figures, row titles */
  --text-3xl:21px;       /* card titles, "the rest of it" headings */
  --text-4xl:25px;       /* wordmark, screen titles */
  --text-5xl:34px;       /* section sub-headings */
  --text-display:clamp(42px,6.2vw,84px);
  --text-statement:clamp(26px,3.1vw,42px);
  --text-heading:clamp(30px,3.2vw,44px);
  --text-heading-sm:clamp(26px,2.4vw,32px);
  --text-lede:clamp(18px,1.6vw,20.5px);
  --text-body:clamp(17px,1.45vw,19.5px);
  --text-figure:clamp(28px,3vw,38px);
  --text-stat:clamp(36px,3.8vw,50px);

  /* ---------- spacing: 4px steps (--space-N = N × 4px) ---------- */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px; --space-6:24px;
  --space-7:28px; --space-8:32px; --space-9:36px; --space-10:40px; --space-11:44px; --space-12:48px;
  --space-14:56px; --space-15:60px; --space-16:64px; --space-18:72px; --space-19:76px; --space-20:80px;
  --space-21:84px; --space-23:92px; --space-24:96px; --space-28:112px; --space-30:120px; --space-33:132px;

  /* ---------- corner radius ---------- */
  --radius-xs:2px;       /* drawn marks */
  --radius-sm:6px;       /* tags, counts, small fills */
  --radius-md:10px;      /* buttons, inputs, chips */
  --radius-lg:14px;      /* cards, panels */
  --radius-xl:20px;      /* large page cards */
  --radius-frame:26px;   /* the grey frame around a product screen */

  /* ---------- shadows ---------- */
  --shadow-card:0 1px 2px rgba(26,26,26,.03);
  --shadow-raised:0 1px 2px rgba(0,0,0,.06);
  --shadow-focus:0 0 0 3px rgba(26,26,26,.08);
  --shadow-select:0 0 0 3px rgba(26,26,26,.06);
  --shadow-cursor:drop-shadow(0 2px 3px rgba(0,0,0,.25));
  --shadow-lift:0 24px 48px -24px rgba(36,39,33,.32),0 2px 6px rgba(36,39,33,.06);   /* the moment's frame and its cards */
}