/* ============================================================
   EVOLV OUTDOOR — CRM design tokens
   Mirrors the evci-v5 brand CI. Five core values only; all other
   tones are opacity tints of those values (no new hues).
   ============================================================ */
:root{
  /* core palette */
  --black:#000000;
  --white:#FFFFFF;
  --navy:#10172B;     /* structural linework / deep panels */
  --depth:#12284C;    /* circular gradients — dark-mode depth */
  --grey:#E0E0DF;     /* primary muted text */

  /* white linework at hierarchy opacities */
  --line-08:rgba(255,255,255,.12);
  --line-14:rgba(255,255,255,.20);
  --line-22:rgba(255,255,255,.30);
  --line-40:rgba(255,255,255,.50);
  --line-70:rgba(255,255,255,.82);

  --grey-70:rgba(224,224,223,.70);
  --grey-45:rgba(224,224,223,.45);
  --grey-22:rgba(224,224,223,.16);

  /* Depth Navy tints. These drive the three ambient glows and NOTHING else, so they are the one
     dial for how dark the page reads. Brought back down 2026-08-19 (user): the page is the dark
     ground and the block cards are the lit surface on it, which is the reverse of the v3 lift. */
  --depth-92:rgba(18,40,76,.50);
  --depth-65:rgba(18,40,76,.38);
  --depth-40:rgba(18,40,76,.27);
  --depth-22:rgba(18,40,76,.17);
  --depth-12:rgba(18,40,76,.12);

  /* semantic states — built ONLY from brand-adjacent tints (kept disciplined) */
  --ok:#5BE0B0;          /* live / won / positive — restrained mint */
  --ok-12:rgba(91,224,176,.12);
  --warn:#E8C36B;        /* attention / pending — warm sand */
  --warn-12:rgba(232,195,107,.12);
  --bad:#E87C7C;         /* offline / lost / overdue — soft coral */
  --bad-12:rgba(232,124,124,.12);
  /* The light blue is no longer the interface highlight (2026-08-13, user). It is kept for the
     two places it still means something specific: the Proposal stage, and Artwork, which is a
     fixed document colour. Everything that was merely "highlighted" now uses --hl. */
  --info:#8FB7FF;        /* light-blue accent from CI palette: Proposal + Artwork ONLY */
  --info-12:rgba(143,183,255,.12);
  /* ---- site health, five brackets (2026-08-25 brief, built 2026-09-01) ----
     Four of these are the palette's own semantic states, reused rather than reinvented: green is
     --ok, light yellow is --warn, the orange is the Operations accent, red is --bad.
     ONLY --health-3 IS NEW, and it is DERIVED as the midpoint between the orange and the red rather
     than picked, because the brand is five colours plus four semantic states and a sixth hue
     invented for one card is how a palette stops being one.
     The colour is ELAPSED TIME and nothing else: the type of failure never moves it. */
  --health-0:#5BE0B0;    /* no open ticket */
  --health-1:#E8C36B;    /* under 12 hours */
  --health-2:#E89B7C;    /* 12 to 24 hours */
  --health-3:#E88C7C;    /* 24 to 48 hours, midway between --health-2 and --health-4 */
  --health-4:#E87C7C;    /* over 48 hours */

  /* the interface highlight: white, and white tints, which is the brand's own hairline idiom */
  --hl:#FFFFFF;
  --hl-12:rgba(255,255,255,.12);

  /* geometry */
  --stroke:1px;
  --notch:14px;          /* cut-frame corner radius */
  --notch-sm:10px;
  --radius:14px;
  --gutter:clamp(22px,3.4vw,54px);
  /* HORIZONTAL PAGE PADDING (2026-08-19, user): 100px more air each side than the gutter, which
     stays as the VERTICAL rhythm. The extra tapers off below roughly 1430px so a narrow screen
     is not crushed — at that width 7vw is the full 100px, under it the page gives the space back
     to the content. `.wrap`, the top bar and the write-failure banner all read this one token. */
  --pad-x:calc(var(--gutter) + clamp(0px,7vw,100px));

  /* ---- type scale (2026-08-13) ----
     The build had drifted to 36 distinct font sizes, most of them within a hair of each other
     (.72/.74/.76/.78 all doing the same job). These eight steps replace the lot. Reach for a
     token, never a raw rem, or it drifts straight back.
     Exceptions, deliberate: `html{font-size:15px}` is the root the rems resolve against, the
     wordmark lockup keeps its own micro-type, and the ✕ / ← glyphs are sized as icons. */
  --fs-face:.56rem;  /* the initials inside a by-line's small round face (2026-09-30) */
  --face:22px;       /* that face's width and height */
  --fs-1:.62rem;   /* micro: badges, uppercase tags, flags */
  --fs-2:.70rem;   /* small labels, chips, table heads, captions */
  --fs-3:.78rem;   /* secondary text, buttons, nav */
  --fs-4:.86rem;   /* body: log rows, cell text, comments */
  --fs-5:.95rem;   /* inputs, deal names, emphasis */
  --fs-6:1.1rem;   /* block heading (h2) */
  --fs-7:1.35rem;  /* larger heading */
  --fs-8:1.65rem;  /* section h1 */
  --fs-display:clamp(1.25rem,2.6vw,2rem);
  /* LETTER SPACING, AS TOKENS (2026-08-27). `--ls-btn` was already referenced by app.css and
     defined ONLY inside the tool's scoped stylesheet, so outside `.lt` it silently resolved to
     nothing. Defined here it works everywhere, and it survives the tool's files being deleted. */
  --ls-display:.01em;
  --ls-btn:.06em;
  /* SETTLED ON THE REAL SCREEN at 3.4rem (2026-08-19, user), which is why it is a flat value and
     not a clamp: the temporary slider set a fixed rem and this is the number it was left on. */
  --fs-greeting:3.13rem;
  /* THE INVESTOR'S DASHBOARD (2026-09-29, user: "a little larger text and clean formatting because
   * this is an older person ... checking on his phone"): one step up everywhere, and two display
   * sizes of its own for the figures. Tokens, so the step is one dial. */
  --fs-inv-body:1.02rem;   /* body copy on that page */
  --fs-inv-lab:.82rem;     /* the small uppercase labels */
  --fs-inv-fig:2.1rem;     /* a card's headline figure */
  --fs-inv-fig-phone:1.7rem; /* the same figure two abreast on a phone, so "R326k" stays one word */
  --fs-inv-hero:2.7rem;    /* the three figures under the welcome */   /* 3.4rem less 8% (2026-09-16, user: "drop the size of the welcome message by 8%") */
  --fs-hero:clamp(2rem,5vw,4.4rem);

  /* ---- vertical rhythm (2026-08-13) ----
     One ladder for the space between things, so a row, a card and a block all breathe by the
     same amounts instead of by whatever each rule happened to pick. */
  --sp-1:6px;
  --sp-2:10px;
  --sp-3:16px;
  --sp-4:24px;
  --sp-5:34px;
  --sp-6:48px;
  /* --sp-7 is the gap BETWEEN whole sections of a page (2026-08-17, user): the pipeline and the
     sell-through sheet are different subjects and were reading as one wall of content. Nothing
     smaller was enough, so it is a step of its own rather than a stretched --sp-6.
     BROUGHT DOWN 100px → 72px (2026-08-19, user): once every block became its own CARD, the card
     edge was already doing the separating and 100px of empty space on top of it read as a gap
     rather than a rhythm. Still a clear step above --sp-6. */
  --sp-7:72px;
  --maxw:1840px;

  /* type */
  --font-display:"Moderniz","Cera Pro",system-ui,sans-serif;
  --font-body:"Cera Pro",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;

  /* motion — exact, premium, no bounce */
  --ease:cubic-bezier(.16,1,.3,1);
  --ease-io:cubic-bezier(.65,.05,.36,1);
  --t-reveal:.7s;
  --t-line:.85s;
  --t-micro:.28s;

  /* gloss sheen */
  --gloss:linear-gradient(180deg,#E0E0DF 0%,#DBDCDC 2%,#707C8F 51%,#2C3F5E 84%,#12284C 100%);

  /* layout metrics */
  --sidebar:264px;
  --topbar:68px;
}

/* cut-frame primitive: round TL + BR, sharp TR + BL */
.cut{border-radius:var(--notch) 0 var(--notch) 0}
.cut-sm{border-radius:var(--notch-sm) 0 var(--notch-sm) 0}