/* CANONICAL TOKEN LAYER — the :root block below is copied VERBATIM from
   resources/css/app.css. Keep them identical; tests/Feature/DesignTokensTest.php fails on drift. */
:root{
  /* Brand — the purple family carries the DESIGN'S VIOLET values since R27-9
     (M2). Every value below is a named constant in the design's Sidebar.jsx /
     Topbar.jsx; none is invented here. The ink, neutral, danger and role
     families are NOT part of this migration and still hold their legacy
     values — see §4b of docs/session27-scoping.md for what that leaves. */
  --emsy-purple:#6C4BF4;
  --emsy-purple-deep:#5B3DF5;
  --emsy-purple-soft:#8B6BF7;
  --emsy-purple-mid:#DDD3FB;
  --emsy-purple-light:#EDE6FE;
  --emsy-purple-faint:#F7F4FD;
  --emsy-accent:#3b5bdb;
  --emsy-accent-deep:#2f4cc9;
  --emsy-accent-light:#eef2ff;
  --emsy-lavender:#f0eff5;
  --emsy-lavender-deep:#e8e6f4;
  --emsy-ink:#1a1a2e;
  --emsy-white:#ffffff;

  /* Neutrals */
  --neutral-50:#fafafa;
  --neutral-75:#f9fafb;
  --neutral-100:#f3f4f6;
  --neutral-200:#e5e7eb;
  --neutral-250:#e2e0ea;
  --neutral-300:#d1d5db;
  --neutral-400:#9ca3af;
  --neutral-500:#6b7280;
  --neutral-700:#374151;

  /* Category tints */
  --tint-blue:#eff6ff;
  --tint-blue-fg:#3b5bdb;
  --tint-peach:#fff7ed;
  --tint-peach-fg:#ea580c;
  --tint-mint:#d1fae5;
  --tint-mint-fg:#059669;
  --tint-lilac:#ede9fe;
  --tint-lilac-fg:#7c3aed;

  /* Semantic status */
  --success:#10b981;
  --success-strong:#059669;
  --success-bg:#d1fae5;
  --success-fg:#065f46;
  --warning:#f59e0b;
  --warning-strong:#d97706;
  --warning-bg:#fef3c7;
  --warning-fg:#92400e;
  --danger:#ef4444;
  --danger-strong:#dc2626;
  --danger-bg:#fee2e2;
  --danger-fg:#991b1b;
  --info-bg:#eef2ff;
  --info-fg:#3b5bdb;
  --violet-bg:#ede9fe;
  --violet-fg:#7c3aed;

  /* Auth pages — M4 C2 (R27-26). The kit hardcodes these; they exist as tokens
     because the sign-in page is the first thing a prospect sees and its violet
     has to be the same violet as the app's. The gradient and its shadow are the
     committing button; the violet ring is the auth field's focus, distinct from
     the app's --ring-focus, which is accent blue and stays. The wash and the two
     glows are the page's own atmosphere and appear nowhere else. */
  --gradient-cta:linear-gradient(135deg,var(--emsy-purple-soft),var(--emsy-purple-deep));
  --shadow-cta:0 10px 24px rgba(108,75,244,.28);
  --ring-focus-violet:0 0 0 4px rgba(108,75,244,.14);
  --auth-wash:linear-gradient(180deg,#EDF8F1 0%,#F3EFFE 40%,#FFFFFF 100%);
  --auth-glow-violet:radial-gradient(circle at 50% 45%,#9C7DF8 0%,#C9B7FC 38%,rgba(255,255,255,0) 72%);
  --auth-glow-mint:radial-gradient(circle,#D9F2E3 0%,rgba(255,255,255,0) 70%);

  /* The login's peach feature tile. --tint-peach is the app's card tint and is
     lighter than the kit's tile; this pair is the kit's own. */
  --tint-peach-soft-bg:#FBE6DA;
  --tint-peach-soft-fg:#B45A1A;

  /* Mobile kit (M5), MobileShell.jsx's M constants. The kit's text4 #9C97AD is
     NOT adopted (R27-15) — --text-muted stands in wherever the kit reaches for
     it. The tint pairs point at the pairs the topbar already uses, so the phone
     and the shell cannot drift apart. */
  --sidebar-w-m:280px;
  --emsy-purple-fainter:#F5F0FE;
  --mobile-wash:linear-gradient(180deg,#EDF8F1 0%,#F3EFFE 34%,#FFFFFF 62%);

  --tint-m-blue-bg:var(--topbar-role-synco-bg);
  --tint-m-blue-fg:var(--topbar-role-synco-fg);
  --tint-m-mint-bg:var(--topbar-role-owner-bg);
  --tint-m-mint-fg:var(--topbar-role-owner-fg);
  --tint-m-lilac-bg:var(--topbar-role-superadmin-bg);
  --tint-m-lilac-fg:var(--emsy-purple-deep);
  --tint-m-peach-bg:var(--tint-peach-soft-bg);
  --tint-m-peach-fg:var(--tint-peach-soft-fg);
  --tint-m-amber-bg:var(--amber-soft-bg);
  --tint-m-amber-fg:var(--amber-soft-fg);
  --tint-m-rose-bg:#FCE1E4;
  --tint-m-rose-fg:#B3263A;

  --calendar-future-fg:#CFC7E6;
  --radius-14:14px;

  --shadow-m-card:0 6px 24px rgba(108,75,244,.05);
  --shadow-m-chip:0 6px 16px rgba(108,75,244,.25);
  --shadow-m-round:0 6px 18px rgba(108,75,244,.28);
  --shadow-m-pill:0 8px 20px rgba(108,75,244,.28);
  --shadow-m-hero:0 14px 36px rgba(108,75,244,.28);
  --shadow-m-drawer:12px 0 48px rgba(108,75,244,.18);
  --overlay-m:rgba(23,23,28,.35);

  /* Notice-box hairlines — M4 C1. NoticeBox.jsx draws each tint with a border
     one step stronger than its ground, and no existing token carries those
     three values: --*-bg is the ground and --*-fg the ink, with nothing
     between. Named for the component that needs them rather than added to the
     semantic families, because that is the only place the design uses them. */
  --notice-accent-border:#c7d4ff;
  --notice-warning-border:#fcd34d;
  --notice-success-border:#6ee7b7;
  /* The same idea one tone further, for the auth pages' error alert: NoticeBox
     has no danger tone, so this is named for the need rather than the JSX. */
  --notice-danger-border:#fecaca;

  /* Role badges */
  --role-superadmin-bg:#fce7f3;
  --role-superadmin-fg:#9d174d;
  --role-synco-bg:#e0f2fe;
  --role-synco-fg:#0369a1;
  --role-owner-bg:#dcfce7;
  --role-owner-fg:#166534;
  --role-staff-bg:#fef3c7;
  --role-staff-fg:#92400e;

  --nav-active-fg:#5B3DF5;

  /* Typography */
  --fs-9:9px; --fs-10:10px; --fs-10-5:10.5px; --fs-11:11px; --fs-11-5:11.5px;
  --fs-12:12px; --fs-12-5:12.5px; --fs-13:13px; --fs-13-5:13.5px; --fs-14:14px;
  --fs-15:15px; --fs-16:16px; --fs-18:18px; --fs-20:20px; --fs-22:22px;
  --fs-24:24px; --fs-28:28px; --fs-30:30px; --fs-32:32px; --fs-40:40px;
  --fw-regular:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700; --fw-extrabold:800;
  --ls-brand:-0.04em; --ls-title:-0.01em; --ls-stat:-0.5px; --ls-label:0.06em; --ls-nav:0.07em;

  /* Spacing */
  --space-1:4px; --space-1-5:6px; --space-2:8px; --space-2-5:10px; --space-3:12px;
  --space-3-5:14px; --space-4:16px; --space-4-5:18px; --space-5:20px; --space-5-5:22px;
  --space-6:24px; --space-6-5:26px; --space-8:32px; --space-9:36px; --space-10:40px;
  --sidebar-w:220px; --topbar-h:54px; --page-pad-y:22px; --page-pad-x:26px;
  --page-pad-mobile:14px; --card-pad:20px; --card-pad-lg:24px;
  --table-cell-y:12px; --table-cell-x:20px; --touch-min:44px;

  /* Radii */
  --radius-xs:4px; --radius-sm:6px; --radius-md:8px; --radius-lg:10px;
  --radius-xl:12px; --radius-2xl:16px; --radius-3xl:20px;
  --radius-pill:99px; --radius-round:50%;

  /* Shadows */
  --shadow-dropdown:0 8px 32px rgba(0,0,0,.12);
  --shadow-drawer:4px 0 24px rgba(0,0,0,.18);
  --shadow-card-hover:0 4px 16px rgba(26,26,46,.08);
  --ring-focus:0 0 0 3px rgba(59,91,219,.15);

  /* Motion */
  --dur-fast:0.13s; --dur-base:0.15s; --dur-slow:0.22s;
  --ease-default:ease; --hover-opacity:0.88;

  /* Semantic aliases the design system's components reference by name.
     Values taken verbatim from the bundle's own project/styles.css (session 27)
     — not invented here, so the components resolve to the design's intent
     rather than to a guess. */
  --font-sans:'Inter',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --surface-card:var(--emsy-white);
  --surface-page:var(--emsy-lavender);
  --surface-sunken:var(--neutral-50);
  --surface-table-head:var(--neutral-50);
  --border-card:var(--neutral-250);
  --border-chrome:var(--neutral-200);
  --border-hairline:var(--neutral-100);
  /* Ink ramp — the design's own values (tokens/colors.css), adopted verbatim
     by R27-12b. --text-body and --text-muted CHANGE VALUE here; they were
     var(--neutral-700) #374151 and var(--neutral-500) #6b7280. Every usage is
     listed in §4b. */
  --text-heading:#3A3945;
  --text-body:#6B6779;
  --text-faint:var(--neutral-400);
  /* The ramp's top step. The design's Sidebar.jsx uses #17171C for brand,
     names and titles; tokens/colors.css's --emsy-ink is #1a1a2e, a different
     colour, so this is its own token rather than an alias. Family: ink. */
  --text-strong:#17171C;
  --text-link:var(--emsy-accent);
  --text-card-title:var(--fs-14);
  --action-primary:var(--emsy-ink);
  --focus-ring:#3b5bdb;
  --gradient-avatar:linear-gradient(135deg,rgba(59,91,219,.13),rgba(155,127,232,.13));
  --lh-normal:1.45;
  --whatsapp:#25D366;

  /* Aliases — resolve the var() names resources/css/app.css already uses below */
  --bg:var(--emsy-lavender);
  --border:var(--neutral-250);
  --near-black:var(--emsy-ink);
  --accent:var(--emsy-accent);
  --accent-light:var(--emsy-accent-light);
  --text:var(--emsy-ink);
  /* Corrected 10 Sep (R27-15). #9C97AD, adopted by R27-12b, is 2.98:1 on white
     and 2.79:1 on the lavender page — below WCAG AA. DesignTokensTest now
     computes both and fails on a regression. */
  --text-muted:#6F6A85;

  /* ── Shell chrome. Family: border. The design's --border-chrome
     (#e5e7eb) and --border-hairline (#f3f4f6) are the app-wide neutrals; the
     shell uses a lilac-tinted pair that colors.css does not name, so they are
     named here. */
  --border-shell:#ECE8F6;
  --border-shell-hairline:#F3F0FA;

  /* Notification dot. Family: status. Deliberately NOT --danger: that token is
     every error state in the app, and a dot is not an error. */
  --notif-dot:#F26D6D;

  /* Bell hover ground. Family: purple — one step between --emsy-purple-light
     and --emsy-purple-mid, which the design uses but does not name. */
  --nav-bell-hover:#E4D9FD;

  /* The design's amber pair (Sidebar.jsx T.amber). Family: warning. Used by
     the nav's warn badge AND the client_staff role pill, which share it. */
  --amber-soft-bg:#FBEFD3;
  --amber-soft-fg:#8A5A12;

  /* Topbar role pill tones (Topbar.jsx ROLE_TONES). Family: role. Separate
     from --role-*-bg/-fg, which are the older, different tints still used by
     the Users page — overwriting those would be a change nobody asked for. */
  --topbar-role-superadmin-bg:#EBDDFB;
  --topbar-role-synco-bg:#E3EEFB;
  --topbar-role-synco-fg:#2C5BA8;
  --topbar-role-owner-bg:#DDF3E6;
  --topbar-role-owner-fg:#12693F;

  /* Notification list item tints. Family: status. */
  --ni-red-bg:#fef2f2;
  --ni-green-bg:#f0fdf4;
  --ni-green-fg:#16a34a;
  --ni-blue-fg:#2563eb;

  /* Semantic aliases the design defines and the shell now uses by name. */
  --nav-active-bg:var(--emsy-purple-light);
  --surface-inverse:var(--emsy-ink);

  /* ── M6-R: the marketing kit's own tokens ─────────────────────────────────
     Landing.jsx resolves these through emsy-design-system/project/tokens/.
     Values copied from there unchanged; see the commit message. Family: kit. */
  --content-max:1200px;
  --section-pad:clamp(56px,7vw,96px);
  --fs-hero:clamp(36px,4.6vw,56px);
  --fs-section:clamp(28px,3.4vw,40px);
  --lh-tight:1;
  --lh-body:1.55;
  --ls-hero:-0.03em;
  --ls-eyebrow:0.12em;
  --blur-nav:blur(12px);
  --emsy-violet-deep:var(--emsy-accent);
  --gradient-violet:linear-gradient(135deg,var(--emsy-accent),var(--emsy-purple));
  --shadow-card:none;
  --shadow-brand-lg:0 16px 40px rgba(59,91,219,.16);
  --wash-violet-cta:rgba(156,125,248,.28);
}