/* ============================================================================
   EquipDash Design System v2 - the tokens themselves (P0).
   The single source of every color, type size, space, radius and shadow.
   Nothing outside this file may declare a raw hex for UI chrome.

   Split out of tokens.css so a surface can take the tokens WITHOUT the
   portal chrome that file also carries (.content / .modal-* / .offcanvas-*).
   The widget layouts load this plus eq-toast.css and nothing else.
   Spec: docs/mockups/design-system-v2.html - Plan: docs/DESIGN_SYSTEM_V2_PLAN.md
   ========================================================================== */

:root {
	/* ---- brand ---- */
	--ed-navy-900: #00224a;
	--ed-navy-700: #003264; /* primary actions, the accent */
	--ed-navy-600: #0a4a8c; /* links, hover, focus */
	--ed-navy-200: #dbe4f0; /* soft navy fill + border: comparison bars, lane segments */
	--ed-navy-100: #eaf1f8; /* selected, info chips */

	/* ---- surfaces ---- */
	--ed-canvas: #f5f7fb;   /* app background behind cards */
	--ed-surface: #ffffff;  /* cards */
	--ed-sunken: #f8fafd;   /* wells, hover rows */

	/* ---- text ---- */
	--ed-ink: #22314e;      /* headings, body */
	--ed-muted: #5A7089;    /* secondary (AA-checked; predates v2) */
	--ed-faint: #95a2b6;    /* captions, placeholders */

	/* ---- border ---- */
	--ed-border: #e7ecf3;   /* the ONE border color */
	/* The same edge, softened, for a card that sits on the light field. A flat
	   grey hairline is what makes a panel read as a box drawn on a page; over
	   drifting color it also fights the color it crosses. Alpha, so it tints
	   with whatever is behind it. */
	--ed-border-soft: rgba(29, 43, 69, .07);

	/* ---- status ---- */
	--ed-success: #1d8a45;
	--ed-success-soft: #e7f4ec;
	--ed-success-border: #bfe3cc; /* border on a success-soft fill */
	/* --ed-success is tuned to sit on white as an icon or a dot. As TEXT on a
	   success-soft pill it measures 3.95:1, so a label in it fails AA - which
	   is what the free-trial promise in the signup bar is. This is the same
	   green a step darker, for text on that fill. */
	--ed-success-ink: #177239;
	--ed-warning: #b45309;
	--ed-warning-soft: #fdf3e7;
	--ed-danger: #c02626;
	--ed-danger-soft: #fbeaea;

	/* ---- closed (a date the shop is not trading) ----
	   Deliberately neutral: the status colors above already mean overdue, late
	   and paid on the surfaces this appears on, and being shut is not a problem
	   to fix. Used by <x-ui.closed-chip> and the calendar's closed band. */
	--ed-closed: #45536b;        /* the chip's words */
	--ed-closed-soft: #eef1f5;   /* the chip's fill */
	--ed-closed-line: #dde3ea;   /* the band's edge, and its hatch */
	--ed-closed-wash: #f3f5f8;   /* the band's ground */

	/* ---- bot marks (a bot's initials square; picked from its id, never semantic) ---- */
	--ed-mark-1: #0f766e;
	--ed-mark-2: #1d4ed8;
	--ed-mark-3: #92400e;
	--ed-mark-4: #0e7490;
	--ed-mark-5: #4d7c0f;
	--ed-mark-6: #9f1239;

	/* ---- AI (Dash surfaces only) ---- */
	--ed-ai: #7C3AED;
	--ed-ai-2: #9d64f2; /* gradient partner for --ed-ai */
	--ed-ai-soft: #f3edfd;

	/* ---- the light field (the conversational surfaces' ground) ----
	   A warm off-white, never #fff, with a slow drifting color field behind the
	   center column (public/css/light-field.css, .lf-*). The colors are OUR navy
	   lifted toward sky, Dash's own violet, and one warm sand so the whole thing
	   reads as EquipDash on a good day rather than as a different product.

	   Alphas are the AA budget, not a taste call, and the budget is spent in two
	   places at once. The field carries a veil (--lf-veil) that softens its own
	   middle, so the strongest color lives out where nothing is read; and every
	   surface that turns the field on ALSO darkens its own secondary text
	   (.lf-stage re-points --ed-muted and --ed-faint - public/css/light-field.css).
	   Those two together are what let the color actually reach the reading
	   column instead of being cancelled exactly where the eye is. At the
	   numbers below, the worst two-blob overlap under the veil leaves
	   --ed-muted at 4.6:1 and --ed-ink at 10:1. Raise a blob alpha, or drop the
	   veil, and that is the number you break - measure it, do not guess. */
	--ed-ground: #f8f8f5;        /* the ground a conversation happens on */
	--ed-ground-sunk: #f2f2ee;   /* its own well: a quiet strip on the ground */
	/* The veil the field paints back over its own middle, so the color lives at
	   the edges and the reading column stays on near-ground. Written out rather
	   than mixed at runtime: a gradient that fades to the keyword `transparent`
	   is a different ramp from one that fades to the same color at alpha 0. */
	--ed-ground-veil: rgba(248, 248, 245, .66);
	--ed-ground-veil-0: rgba(248, 248, 245, 0);
	--ed-field-1: rgba(10, 74, 140, .20);    /* navy-600, the brand's own lift */
	--ed-field-2: rgba(124, 58, 237, .13);   /* Dash's violet */
	--ed-field-3: rgba(87, 169, 232, .22);   /* sky */
	--ed-field-4: rgba(242, 178, 120, .24);  /* warm sand - the good day */
	/* Secondary text ON a light-field surface, one step darker than the plain
	   pair. .lf-stage re-points --ed-muted/--ed-faint to these, so every muted
	   line on a conversational surface moves together and none is missed. This
	   is the half of the AA budget the SURFACE pays; the veil pays the rest. */
	--ed-muted-field: #4e6379;   /* 5.8:1 on white, 4.7:1 over the worst of the field */
	--ed-faint-field: #7b8ca1;   /* captions and placeholders ON CARDS, never on the field itself */

	/* And one step darker again, for a surface that turns the field UP.
	   The pair above is sized for the kit's default field, where the veil is
	   at full strength and the color mostly lives out at the edges. A surface
	   that wants the color behind the reading column - first run does - buys
	   that by weakening the veil, and these are what the text costs then.

	   The numbers here are measured, and the way they are measured is the
	   point. An earlier pass put the field's worst composite at #bcbfe1 and
	   the worst line at 4.63:1; neither reproduced. Two things were being
	   missed. The sample was taken where the text happens to sit rather than
	   everywhere it can travel - the receipt head sits under the veil's top
	   band on a thread long enough to scroll, and out in the open at y=317 on
	   a brand-new account, which is the case nobody had looked at. And the
	   blobs were sampled in lockstep, so the darkest composite the field can
	   actually make - four blobs out of step, at 22s, 26s, 28s and 31s - was
	   never in the sample at all.

	   Measured properly (16 explicitly seeked phases, each blob staggered, the
	   per-pixel darkest of all of them, over the whole reading column, on the
	   running preview at 1440x900): the field bottoms out at rgb(171,176,218),
	   not #bcbfe1. Against that, and against the .90 recede first run puts on
	   an answered turn, the old pair measured 4.05:1 for --ed-muted and 3.44:1
	   for --ed-faint - both under the 4.5 floor. These two hold 4.80:1 and
	   4.84:1 anywhere in the viewport on the same sweep. Re-run it before
	   moving either; the recipe is in public/css/first-run.css above
	   --lf-veil-col-strength. */
	--ed-muted-field-lit: #253745;
	--ed-faint-field-lit: #304354;

	/* ---- the aura (a panel lit from its inner edge while work runs) ---- */
	--ed-aura-sky: rgba(87, 169, 232, .34);
	--ed-aura-lit: rgba(124, 58, 237, .28);
	--ed-aura-deep: rgba(0, 50, 100, .16);
	/* Deliberately faint. The sheen crosses OVER the panel's own words, and at
	   the reference's strength it washed a line of --ed-muted out for the third
	   of a second it took to pass - on the one screen where the owner is reading
	   a promise about how long the wait is. */
	--ed-aura-sheen: rgba(255, 255, 255, .28);

	/* ---- WhatsApp's own chrome, for the example chat on the WhatsApp page ----
	   Not ours and never semantic: these are the colors WhatsApp paints its own
	   app in, so a picture of that app on our page looks like the thing the
	   owner will open on their phone. Nothing else in the portal may use them.
	   They live here because hexes are only allowed in a tokens file
	   (lint-design-system R2), and the module stylesheet that draws the chat
	   reads them from here. */
	--wa-header: #075e54;
	--wa-avatar: #0b7a6d;
	--wa-ground: #ece5dd;
	--wa-bubble-in: #ffffff;
	--wa-bubble-out: #dcf8c6;
	--wa-bubble-ink: #111b21;
	--wa-bubble-time: #7c8a94;
	--wa-link: #1f7ae0;
	--wa-brand: #25d366;
	--wa-bar: #f4f4f4;
	--wa-bar-ink: #8b97a0;
	--wa-day-ink: #5c6a72;

	/* ---- WordPress's own blue, for its tile on Settings > Integrations
	   (#6386). Only that tile uses it. */
	--wp-brand: #21759b;

	/* The example chat on Settings > API & Integrations > AI apps (#9120) is a
	   picture of ChatGPT or Claude, so it wears their colors, for the same reason
	   the WhatsApp chat above wears WhatsApp's. Only public/css/ai-apps.css reads them. */
	--claude-ground: #faf9f5;
	--claude-bar: #f0eee6;
	--claude-ink: #3d3929;
	--claude-mute: #6b675c;
	--chatgpt-ground: #ffffff;
	--chatgpt-bubble: #f4f4f4;
	--chatgpt-ink: #0d0d0d;
	--chatgpt-mute: #5d5d5d;

	/* ---- on-accent (text/icons on filled navy, danger, ai) ---- */
	--ed-on-accent: #ffffff;
	/* State pills keep their meaning on a navy card: the fill goes translucent
	   white and the words take a light tint of the same state (learned rule
	   0012 - an inverting row carries its children's color with it). */
	--ed-on-navy-fill: rgba(255, 255, 255, 0.18);
	--ed-on-navy-danger: #ffc2bd;
	--ed-on-navy-warning: #ffd79a;
	--ed-on-navy-success: #a6e6c0;
	--ed-danger-strong: #a81f1f; /* danger hover */
	--ed-setup-border: #d4dcea;  /* dashed border on setup cards */
	--ed-hatch-blocked: repeating-linear-gradient(45deg, #e6ebf3 0 6px, #f3f6fa 6px 12px); /* unavailable timeline segments */

	/* ---- type scale (BRCandor is the one brand face) ---- */
	--ed-font: "BRCandor", sans-serif;
	--ed-display-30: 600 30px/1.2 var(--ed-font);
	/* A question someone is SAYING to you, set lighter than a page heading:
	   the conversational surfaces (signup, first run) ask in this. */
	--ed-display-28: 500 28px/1.28 var(--ed-font);
	--ed-display-24: 600 24px/1.25 var(--ed-font);
	/* The one sentence a conversational surface is saying, at the size the
	   owner reads first. Fluid so a long line still lands on a phone without a
	   second token; the tracking has to ride with it - a display face at 46px
	   with default tracking reads loose and dated. */
	--ed-display-46: 700 clamp(30px, 4.4vw, 46px)/1.12 var(--ed-font);
	/* -.031em, measured off the reference (48px set at -1.5px). At -.02em the
	   line reads as a page heading that was scaled up rather than a display
	   line that was set. Only the 46px token uses it. */
	--ed-display-track: -.031em;

	--ed-title-18: 600 18px/1.3 var(--ed-font);
	--ed-subtitle-15: 600 15px/1.4 var(--ed-font);
	--ed-body-14: 400 14px/1.5 var(--ed-font);
	/* Reading size: Dash's prose, the owner's reply, the composer input. */
	--ed-body-16: 400 16px/1.6 var(--ed-font);
	--ed-small-12: 400 12.5px/1.45 var(--ed-font);
	--ed-caption-11: 600 11px/1.3 var(--ed-font); /* + uppercase + .06em spacing */

	/* ---- space (4-base) ---- */
	--ed-s1: 4px;
	--ed-s2: 8px;
	--ed-s3: 12px;
	--ed-s4: 16px;
	--ed-s5: 20px;
	--ed-s6: 24px;
	--ed-s7: 32px;
	--ed-s8: 40px;

	/* ---- radius ---- */
	--ed-r-ctl: 8px;
	--ed-r-card: 12px;
	--ed-r-xl: 18px;        /* a panel on the light field - the conversational surfaces */
	--ed-r-pill: 999px;

	/* ---- overlay scrim behind modals and drawers ---- */
	--ed-scrim: rgba(0, 34, 74, .35);

	/* ---- shadows ---- */
	--ed-shadow-card: 0 1px 2px rgba(29, 43, 69, .05), 0 8px 24px rgba(29, 43, 69, .07);
	--ed-shadow-pop: 0 12px 40px rgba(29, 43, 69, .18);
	--ed-shadow-orb: 0 8px 22px rgba(124, 58, 237, .30);   /* the presence, lifted off the page */
	--ed-shadow-thread: 0 4px 18px rgba(29, 43, 69, .06);  /* a card sitting in a conversation */

	/* ---- motion ----
	   One ladder for every surface (docs/ONBOARDING_DESIGN_CRITIQUE_2026-09-14.md
	   section 5). pop = anything whose SIZE changes, glide = anything that
	   MOVES, press = the 90ms squeeze before an action. Nothing ordinary runs
	   longer than --ed-dur-max. */
	--ed-fast: 150ms ease;
	--ed-ease-pop: cubic-bezier(.24, 1.34, .38, 1);
	--ed-ease-glide: cubic-bezier(.22, 1, .36, 1);
	--ed-ease-press: cubic-bezier(.4, 0, .6, 1);
	--ed-ease-gentle: linear(0, .097, .298, .514, .7, .839, .933, .989, 1.017, 1.028, 1.028, 1.023, 1.017, 1.011, 1.006, 1.003, 1.001, 1);
	--ed-dur-color: 160ms;
	--ed-dur-press: 90ms;
	--ed-dur-move: 320ms;
	--ed-dur-size: 340ms;
	--ed-dur-rise: 850ms;
	--ed-dur-max: 620ms;

	/* ---- named z layers ---- */
	--ed-z-nav: 100;
	--ed-z-drawer: 1050;
	--ed-z-modal: 1055;
	--ed-z-toast: 1080;
	--ed-z-tooltip: 1090;
}