/* MiSalon design tokens — 22 September 2026
   Navy leads. Coral is a small accent only (a dot, a marker, one number) — never a button fill or a band.
   Drop this file in first; app.css and site.css only read these variables. */
:root{
  /* Brand */
  --navy-950:#0F1A2B;   /* darkest band, phone status bar */
  --navy-900:#1B2A41;   /* THE brand navy: primary buttons, dark bands, active tab */
  --navy-800:#26395A;   /* hover on navy */
  --navy-700:#3A4F73;   /* navy text on light, secondary icons */
  --navy-300:#A9B6CB;   /* muted text on navy */
  --navy-100:#E4E9F1;   /* selected row, chip fill */
  --navy-50:#F1F4F8;    /* quiet fill */
  --coral:#C2461F;      /* accent only */
  --coral-100:#F8E4DC;  /* accent tint, for a single highlighted value */

  /* Neutrals (warm, not blue-grey) */
  --paper:#F6F4EF;      /* app and page background */
  --surface:#FFFFFF;    /* cards */
  --ink:#141820;        /* body text */
  --ink-2:#4B5261;      /* secondary text */
  --ink-3:#7B8291;      /* hints, placeholders */
  --line:#E4E1D9;       /* card borders, dividers */
  --line-2:#D3CFC4;     /* input borders */
  --fill:#EFECE5;       /* bar track, empty states */

  /* Status (used for pills and bars; never as button fills) */
  --ok:#1E7A4F;   --ok-100:#DFF1E7;
  --warn:#9A6412; --warn-100:#F6EBD3;
  --bad:#B3261E;  --bad-100:#F8E0DE;
  --bar-ok:#2F8A5F; --bar-mid:#C99A2E; --bar-low:#C2461F;

  /* Stylist colours for the diary (from core.js TEAMCOL, calmed) */
  --team-1:#A9603F; --team-2:#3A7A73; --team-3:#8A6A2B; --team-4:#3B5A78; --team-5:#7A5230; --team-6:#4A4A6A;

  /* Type */
  --font-sans:"Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:"IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --fs-11:11px;  /* mono labels (uppercase, +.08em) */
  --fs-12:12px;  /* pills, table heads */
  --fs-13:13px;  /* sub lines */
  --fs-15:15px;  /* body in the app */
  --fs-16:16px;  /* inputs (16 stops iPhone zooming) */
  --fs-18:18px;  /* card headings h2 in the app */
  --fs-22:22px;  /* sheet titles h3 */
  --fs-28:28px;  /* screen title, KPI numbers */
  --fs-40:40px;  /* website h2 (desktop) */
  --fs-64:64px;  /* website h1 (desktop); 40px on phone */
  --lh-tight:1.08; --lh-snug:1.3; --lh-body:1.55;
  --fw-regular:450; --fw-medium:550; --fw-bold:700; --fw-heavy:800;
  --tracking-head:-0.02em; --tracking-label:0.08em;

  /* Space (4-point) */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px; --s-6:24px; --s-8:32px; --s-10:40px; --s-14:56px; --s-20:80px;
  --gutter-phone:16px; --gutter-desk:32px;
  --tap:44px;              /* smallest thing a thumb has to hit */

  /* Radius */
  --r-xs:6px;   /* pills, chips */
  --r-sm:10px;  /* buttons, inputs */
  --r-md:14px;  /* cards */
  --r-lg:22px;  /* sheets, phone photos */
  --r-full:999px;

  /* Shadow (low and warm; cards mostly rely on the 1px line) */
  --sh-1:0 1px 2px rgba(20,24,32,.06);
  --sh-2:0 6px 18px -6px rgba(20,24,32,.14);
  --sh-3:0 24px 48px -12px rgba(15,26,43,.28);   /* bottom sheets, dialogs */
  --ring:0 0 0 3px rgba(27,42,65,.22);          /* focus */

  /* Layout */
  --w-sidebar:232px; --w-content:1120px; --w-site:1240px;
  --bp-desk:1024px;  /* sidebar appears; below this the tab bar sits at the bottom */
}