/* Graphite & Jade — the one theme the admin, the brand portal, /brands and the
   web app share (light). [P] = verbatim from joehukum-apps/lib/ui/tokens.dart
   (JPalette.light); [N] = interpolated on the graphite ramp. Surfaces add
   aliases or a dark scheme in their own stylesheet, loaded after this one.
   The marketing site keeps its own palette (site/style.css). */
:root {
  color-scheme: light;

  /* --- neutral ramp. Never use a raw --n-* in a rule; go via a semantic name. */
  --n-0:#FFFFFF; --n-25:#FDFDFC; --n-50:#FBFBFA; /* [P] canvas */ --n-75:#F7F7F6;
  --n-100:#F2F3F1; /* [P] sunken */ --n-150:#ECEDEB; --n-200:#E4E6E3; --n-300:#D5D8D5;
  --n-400:#B2B7B8; --n-500:#6A7074; /* [P] inkFaint */
  --n-600:#62686C; --n-700:#5A6166; /* [P] inkSoft */
  --n-800:#2C2F32; --n-900:#16181A; /* [P] ink */
  --n-950:#0E0F10;

  /* --- surfaces */
  --surface-page:var(--n-50); --surface-panel:var(--n-75); --surface-card:var(--n-0);
  --surface-sunken:var(--n-100); --surface-hover:var(--n-75); --surface-active:var(--n-100);
  --surface-inverse:var(--n-900); --surface-tooltip:var(--n-950);
  --scrim:rgba(22,24,26,.44);

  /* --- ink */
  --ink-primary:var(--n-900); --ink-secondary:var(--n-700); --ink-tertiary:var(--n-600);
  --ink-muted:var(--n-500); --ink-disabled:var(--n-400);
  --ink-inverse:#FFFFFF; --ink-inverse-soft:#B4BABF; /* [P] dark.inkSoft */
  --ink-inverse-cream:#F3F4F3;                       /* [P] dark.ink */

  /* --- borders */
  --border-hairline:var(--n-200); --border-subtle:var(--n-150); --border-strong:var(--n-300);
  --focus-ring:0 0 0 3px rgba(15,122,90,.22);
  --focus-ring-danger:0 0 0 3px rgba(180,71,47,.22);

  /* --- accent. [P] brand / brandDeep / brandWash. Jade is 4.77:1 on white,
         so unlike the old amber it may be type and may carry white. */
  --accent:#0F7A5A; --accent-hover:#0C6349; --accent-active:#0A523C;
  --accent-ink:#0C6349;      /* [P] brandDeep — 6.51:1 */
  --accent-subtle:#E8F3EF; --accent-subtle-border:#C6E2D7;
  /* [P] clay — reserved for people/human moments, as in the app */
  --clay:#A84E2B; --clay-fill:#F7EBE4; --clay-border:#EBCFC0;

  /* --- status. [P] positive / warn / danger and their washes; info is the
         app's blue tone pair (toneInk[4] on toneWash[4]). */
  --ok:#0F7A5A;     --ok-fill:#E8F3EF;     --ok-border:#C6E2D7;
  --warn:#8A6300;   --warn-fill:#F6EFDF;   --warn-border:#E8D9B3;
  --danger:#B4472F; --danger-fill:#F8EAE6; --danger-border:#EDCFC6; --danger-hover:#9A3B26;
  --info:#4A6289;   --info-fill:#EAEFF8;   --info-border:#D2DBEC;

  /* --- spacing: token name == px value. There is no other spacing. */
  --sp-2:2px; --sp-4:4px; --sp-6:6px; --sp-8:8px; --sp-10:10px; --sp-12:12px;
  --sp-14:14px; --sp-16:16px; --sp-20:20px; --sp-24:24px; --sp-32:32px; --sp-64:64px;

  /* --- radii. JRadii's 14/16/22 are tuned for touch; on a 40px table row they
         read bubbly, so admin runs one step tighter. Only `pill` carries over. */
  --r-2:2px; --r-4:4px; --r-6:6px; --r-8:8px; --r-10:10px; --r-12:12px; --r-full:999px;

  /* --- type */
  --ff-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  --ff-display:'Fraunces',Georgia,serif;
  --ff-mono:ui-monospace,SFMono-Regular,'SF Mono',Menlo,Consolas,monospace;
  --fs-display:20px; --fs-stat:20px; --fs-h1:16px; --fs-md:14px;
  --fs-body:13px; --fs-sm:12px; --fs-xs:11px;

  /* --- shadows: deliberately almost empty. Depth is a 1px hairline; shadow is
         reserved for things that genuinely float. */
  --shadow-xs:0 1px 2px rgba(22,24,26,.05);
  --shadow-sm:0 2px 6px rgba(22,24,26,.07);
  --shadow-md:0 8px 24px -6px rgba(22,24,26,.14);
  --shadow-drawer:-12px 0 32px -12px rgba(22,24,26,.16);

  /* --- motion [P] JDur */
  --dur-fast:150ms; --dur-mid:180ms; --dur-slow:260ms;
  --ease-out:cubic-bezier(.22,.61,.36,1);
  --ease-enter:cubic-bezier(.32,.72,0,1);

  /* --- z. Toast sits ABOVE the drawer: an error must never be hidden by the
         thing that caused it. */
  --z-sticky:10; --z-sidebar:20; --z-dropdown:40; --z-scrim:60; --z-drawer:70;
  --z-modal:80; --z-toast:90; --z-tooltip:100;

  /* --- layout */
  --sidebar-w:232px; --header-h:56px; --content-max:1360px; --gutter:32px;
}
@media (max-width:1279px){ :root{ --gutter:24px; } }
@media (max-width:899px) { :root{ --gutter:16px; } }