/* PhopWatch design tokens v2. Source of truth: /DESIGN.md. Light mode only. */
:root{
  /* surfaces */
  --bg:#FBF8F3; --surface:#FFFFFF; --surface-2:#F3EEE6; --surface-3:#EAE3D8;
  /* lines */
  --border:#E3DBCE;          /* decorative dividers only, 1.3:1, never a control boundary */
  --border-input:#8C8175;    /* control boundaries, 3.6:1 on bg */
  --border-strong:#1F1A17;   /* dense (dashboard) cells */
  /* text */
  --text:#1F1A17; --text-muted:#5F564E; --on-accent:#FFFFFF;
  /* accent */
  --accent:#3B36C9; --accent-hover:#302BAE; --accent-press:#27238F; --accent-2:#6D5BE8; --accent-soft:#ECEBFB;
  /* engraving art direction (DESIGN.md 2026-10-02): sky = --accent-press value; amber is an accent only, never text, only on --sky */
  --sky:#27238F; --cream:#F4EAD5; --amber:#F5B841;
  --gradient-accent:linear-gradient(100deg,#3B36C9,#6D5BE8);
  /* status: fg / soft bg / dot (dot = fg) */
  --up:#047857; --up-bg:#DCF5E9;
  --down:#B42318; --down-bg:#FDE4E1; --down-strong:#8E1B12;
  --warn:#92400E; --warn-bg:#FDEBC8; --warn-dot:#B45309;
  --paused:#475569; --paused-bg:#E9E5DD;
  --ink:#1F1A17; --on-ink:#FBF8F3; --ink-up:#4ADE80; --ink-down:#FF8A8A;
  --focus:#3B36C9;
  /* type */
  --font-sans:'Anuphan','Noto Sans Thai',system-ui,sans-serif;
  --font-num:'Plex Mono Num',ui-monospace,'SFMono-Regular',Menlo,monospace;
  --fs-xs:.75rem; --fs-sm:.875rem; --fs-base:1rem; --fs-lg:1.125rem; --fs-xl:1.375rem; --fs-2xl:1.75rem; --fs-3xl:2.25rem; --fs-4xl:clamp(2.25rem,5.2vw,3.5rem);
  --lh-body:1.7; --lh-ui:1.5; --lh-head:1.35; --lh-display:1.3;
  /* space (4px grid) */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px; --sp-7:48px; --sp-8:64px; --sp-9:96px; --sp-10:128px;
  --gutter:16px; --container:1160px;
  /* radius */
  --r-sm:8px; --r-md:12px; --r-lg:18px; --r-pill:999px;
  /* shadow */
  --sh-1:0 1px 2px rgba(31,26,23,.06),0 2px 6px -2px rgba(31,26,23,.08);
  --sh-2:0 1px 2px rgba(31,26,23,.06),0 8px 24px -8px rgba(31,26,23,.14),0 24px 48px -24px rgba(31,26,23,.12);
  --sh-3:0 24px 64px -16px rgba(31,26,23,.30);
  --glow-accent:0 10px 22px -8px rgba(59,54,201,.55);
  /* glass / blur */
  --glass-bg:rgba(251,248,243,.78); --blur-glass:14px; --blur-glass-sm:6px;
  /* motion */
  --ease-spring:cubic-bezier(0.34,1.56,0.64,1);  /* small elements only (under about 64px) */
  --ease-glide:cubic-bezier(0.16,1,0.3,1);       /* large surfaces, never bounce */
  --ease-inout:cubic-bezier(0.65,0,0.35,1);      /* sliding indicators, underlines */
  --dur-fast:150ms; --dur-base:250ms; --dur-slow:500ms; --dur-reveal:650ms;
  /* layers */
  --z-nav:50; --z-modal:100; --z-toast:110;
}
@media (max-width:768px){ :root{ --blur-glass:var(--blur-glass-sm); } }
/* Dense register: dashboard and data views. Flat bordered cells, mono numerals. */
[data-density="dense"]{ --card-border:1.5px solid var(--border-strong); --card-shadow:none; --card-radius:10px; --num-font:var(--font-num); }
:root{ --card-border:1px solid var(--border); --card-shadow:var(--sh-2); --card-radius:var(--r-lg); --num-font:var(--font-sans); }

/* Surfaces, texture and art (DESIGN.md "Surfaces, texture and art", approved 2026-09-30) */
:root{
  --grain-tile:url(/assets/img/grain-96.webp);       /* 96px tile, 1.3 KB, ink specks <= 10% alpha, light <= 16% */
  --glow-corner:radial-gradient(closest-side,rgba(109,91,232,.16),transparent); /* --surface cards only */
  --ghost-num:color-mix(in srgb,var(--text) 6%,transparent);
  --border-hair:1px solid var(--border);
  --art-stroke:color-mix(in srgb,var(--border-input) 35%,transparent);
  --container-wide:1280px;
  --measure-th:36em;                                  /* PROVISIONAL until checked on a real phone screenshot */
  --card-pad:24px;
  --sb-thumb:#8C8175; --sb-track:#F3EEE6; --sb-thumb-hover:#5F564E; /* thumb/track 3.30:1 */
  --nav-h:64px;
}
@media (min-width:768px){:root{--card-pad:32px}}
@media (min-width:1280px){:root{--card-pad:40px}}