/* ============================================================
   SERVED SOCIAL — DESIGN TOKENS
   ------------------------------------------------------------
   The single source of truth for colour, type, space, radius and
   depth. Nothing else in the codebase may define these values.

   Load this FIRST on every page. The public shell then loads
   served-system.css (components); the app loads
   servedsocial-app.css (re-skin of the existing app chrome).

   Palette "Service": slate is the room, linen is the plate the
   work is set down on, claret is the heart off the butler's tray.
   Explicitly NOT art deco — no sunburst, no gold, no rubber hose.
   ============================================================ */

:root{
  /* --- palette: "Service" -------------------------------------
     Slate = the room. Cool-neutral, sampled off the logo black. */
  --slate-900:#0F1014;
  --slate-850:#121419;
  --slate-800:#16181D;
  --slate-700:#1E2128;
  --slate-600:#2A2E37;
  --slate-500:#3B404B;

  /* Linen = the plate. Every surface the work is set down on. */
  --linen-000:#FFFFFF;
  --linen-100:#F7F4EF;
  --linen-200:#EFEAE1;
  --linen-300:#E3DCD0;
  --linen-400:#CFC6B7;

  /* Ink = the logo black, measured off the wordmark. */
  --ink-900:#121216;
  --ink-700:#3A3D45;
  --ink-500:#6B7079;

  /* Claret = the heart on the tray. The only accent. */
  --claret:#B52D3B;          /* on linen + button fills — 5.7:1 on linen  */
  --claret-deep:#8E1F2C;     /* pressed                                   */
  --claret-lift:#E4576A;     /* accent type on slate — 4.9:1 on slate-800 */
  --claret-wash:rgba(181,45,59,.09);

  /* Functional only. Never decorative, always paired with words. */
  --ok:#2E7D5B;   --ok-lift:#5BC894;
  --warn:#B4740E; --warn-lift:#E0A340;
  --stop:#B4322A; --stop-lift:#F08B80;

  /* --- semantic ---------------------------------------------- */
  --bg:var(--slate-900);
  --surface:var(--slate-800);
  --surface-raised:var(--slate-700);
  --text:var(--linen-100);
  --text-muted:#9AA0AC;                    /* 6.6:1 on slate-800 */
  --hairline:rgba(247,244,239,.10);
  --hairline-strong:rgba(247,244,239,.18);

  /* --- type --------------------------------------------------- */
  --font-display:"Archivo Narrow","Archivo Condensed",Impact,"Haettenschweiler","Arial Narrow",sans-serif;
  --font-body:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --t-display-xl:clamp(3.1rem,8.2vw,6.75rem);
  --t-display-l:clamp(2.35rem,5.2vw,4.15rem);
  --t-h2:clamp(1.85rem,3.6vw,2.9rem);
  --t-h3:clamp(1.2rem,1.6vw,1.4rem);
  --t-lead:clamp(1.05rem,1.35vw,1.25rem);
  --t-body:1rem;
  --t-small:.875rem;
  --t-label:.75rem;

  /* --- space: 4pt base ---------------------------------------- */
  --s1:4px;  --s2:8px;  --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:64px; --s9:96px; --s10:128px;

  /* --- radius -------------------------------------------------- */
  --r-xs:4px; --r-s:8px; --r-m:12px; --r-l:20px; --r-xl:28px; --r-pill:999px;

  /* --- depth: "set down on a counter" --------------------------
     Always a pair — a tight contact shadow plus a broad ambient.
     One blurry drop shadow is what a hobby project looks like. */
  --lift-1:0 1px 1px rgba(9,10,13,.20), 0 4px 10px -2px rgba(9,10,13,.24);
  --lift-2:0 1px 2px rgba(9,10,13,.28), 0 14px 30px -8px rgba(9,10,13,.42);
  --lift-3:0 2px 4px rgba(9,10,13,.32), 0 36px 64px -16px rgba(9,10,13,.60);
  --edge:inset 0 1px 0 rgba(247,244,239,.07);

  --ease-out:cubic-bezier(.16,.84,.44,1);
  --dur:220ms;

  --gutter:clamp(20px,5vw,64px);
  --max:1240px;
}