verae-staff-ui/public/brand/tokens.css

/* GENERATED from BrandingBook.md (brand-tokens v1.0.0). Do not edit — run ./regenerate.sh */
:root{
  --plum:#531B59;
  --plum-d:#3E1343;
  --plum-mid:#6C5B81;
  --plum-200:#D9CCE3;
  --plum-100:#EBD9EE;
  --plum-50:#F7EFF8;
  --violet:#6B3FD6;
  --print-purple:#4A2E8C;
  --gold:#C4A85A;
  --gold-d:#6E5717;
  --gold-50:#FFF8E6;
  --cube:#5CE1E6;
  --cube-navy:#1E3D59;
  --cube-ink:#174759;
  --ink:#1D1534;
  --ink-2:#2C2140;
  --ink-soft:#3B3250;
  --muted:#5E5470;
  --subtle:#6B6478;
  --faint:#8A8298;
  --disabled:#9A90A9;
  --line-strong:#CFC7DA;
  --line:#E3DEF0;
  --line-soft:#F0ECF4;
  --surface-2:#F4F1F8;
  --surface-3:#FAF8FC;
  --bg:#FBFAFD;
  --card:#FFFFFF;
  --on-primary:#FFFFFF;
  --canvas:#E9E6EE;
  --night:#0F0A14;
  --night-card:#1A1224;
  --night-line:#3A2A4A;
  --night-ink:#F4EEF8;
  --night-muted:#A898B8;
  --ok:#0E6B3A;
  --ok-bg:#E3F5EA;
  --ok-bd:#B9E2C8;
  --inc:#8A3D00;
  --inc-bg:#FFE8D3;
  --inc-bd:#F3C9A3;
  --pend:#475467;
  --pend-bg:#EEF0F3;
  --pend-bd:#D5DAE1;
  --warn:#7A4F00;
  --warn-bg:#FFF3D6;
  --warn-bd:#EDD49A;
  --err:#B42318;
  --err-bg:#FDE8E6;
  --err-bd:#F4BCB6;
  --info:#3B2A8C;
  --info-bg:#ECE8FB;
  --info-bd:#CFC6F3;
  --off:#334155;
  --off-bg:#E5EAF1;
  --off-bd:#C9D2DE;
  --focus:#6B3FD6;
  --callout:#E0218A;
  --font-sans:'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-serif:'Fraunces', Georgia, serif;
  --font-mono:'JetBrains Mono', 'SF Mono', 'Roboto Mono', ui-monospace, monospace;
  --font-apple:-apple-system, 'SF Pro', 'Inter', sans-serif;
  --font-android:'Roboto', 'Inter', sans-serif;
  --font-windows:'Segoe UI Variable', 'Segoe UI', 'Selawik', 'Inter', sans-serif;
  --font-gnome:'Adwaita Sans', 'Cantarell', 'Inter', sans-serif;
  --font-icons:'MSR';
  --fs-display:34px; --lh-display:41px; --fw-display:700; --tr-display:-0.02em;
  --fs-title-1:28px; --lh-title-1:34px; --fw-title-1:700; --tr-title-1:-0.01em;
  --fs-title-2:22px; --lh-title-2:28px; --fw-title-2:700; --tr-title-2:0em;
  --fs-title-3:18px; --lh-title-3:24px; --fw-title-3:600; --tr-title-3:0em;
  --fs-body-lg:17px; --lh-body-lg:24px; --fw-body-lg:400; --tr-body-lg:0em;
  --fs-body:15px; --lh-body:22px; --fw-body:400; --tr-body:0em;
  --fs-body-sm:13px; --lh-body-sm:18px; --fw-body-sm:400; --tr-body-sm:0em;
  --fs-caption:12px; --lh-caption:16px; --fw-caption:500; --tr-caption:0em;
  --fs-overline:11px; --lh-overline:14px; --fw-overline:600; --tr-overline:0.06em;
  --fs-mono:13px; --lh-mono:18px; --fw-mono:500; --tr-mono:-0.01em;
  --fs-certificate-title:28px; --lh-certificate-title:34px; --fw-certificate-title:600; --tr-certificate-title:-0.01em;
  --space-0:0px;
  --space-1:2px;
  --space-2:4px;
  --space-3:8px;
  --space-4:12px;
  --space-5:16px;
  --space-6:20px;
  --space-7:24px;
  --space-8:32px;
  --space-9:40px;
  --space-10:48px;
  --space-11:64px;
  --radius-xs:4px;
  --radius-sm:6px;
  --radius-md:10px;
  --radius-lg:12px;
  --radius-xl:14px;
  --radius-2xl:18px;
  --radius-pill:999px;
  --elev-e0:none;
  --elev-e1:0 1px 2px rgba(29,21,52,.06), 0 1px 1px rgba(29,21,52,.04);
  --elev-e2:0 4px 14px rgba(29,21,52,.10), 0 1px 3px rgba(29,21,52,.06);
  --elev-e3:0 12px 40px rgba(30,10,40,.25), 0 2px 8px rgba(30,10,40,.12);
  --dur-fast:120ms;
  --dur-base:200ms;
  --dur-slow:320ms;
  --ease-standard:cubic-bezier(0.2, 0, 0, 1);
  --ease-emphasized:cubic-bezier(0.16, 1, 0.3, 1);
  --ease-exit:cubic-bezier(0.3, 0, 1, 1);
  --touch-ios-min:44px;
  --touch-android-min:48px;
  --touch-windows-min:40px;
  --touch-web-min:44px;
  --touch-glove-min:72px;
}
[data-theme="dark"]{--plum:#D7B4DE;--plum-d:#EBD9EE;--plum-50:#2A1A30;--plum-100:#3A2342;--on-primary:#1D1534;--ink:#F4EEF8;--muted:#B3A6C2;--line:#3A2A4A;--line-soft:#2A2036;--surface-2:#241A30;--bg:#0F0A14;--card:#1A1224;--ok:#7FD9A5;--ok-bg:#12301F;--inc:#F5B27A;--inc-bg:#33200F;--pend:#BAC4D2;--pend-bg:#1F2531;--warn:#EBC874;--warn-bg:#2D2410;--err:#FF968C;--err-bg:#361615;--info:#BDB1FF;--info-bg:#221D40;--off:#B0BCCD;--off-bg:#1C2330;--focus:#BDB1FF;}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]):not([data-theme="mock"]){--plum:#D7B4DE;--plum-d:#EBD9EE;--plum-50:#2A1A30;--plum-100:#3A2342;--on-primary:#1D1534;--ink:#F4EEF8;--muted:#B3A6C2;--line:#3A2A4A;--line-soft:#2A2036;--surface-2:#241A30;--bg:#0F0A14;--card:#1A1224;--ok:#7FD9A5;--ok-bg:#12301F;--inc:#F5B27A;--inc-bg:#33200F;--pend:#BAC4D2;--pend-bg:#1F2531;--warn:#EBC874;--warn-bg:#2D2410;--err:#FF968C;--err-bg:#361615;--info:#BDB1FF;--info-bg:#221D40;--off:#B0BCCD;--off-bg:#1C2330;--focus:#BDB1FF;}}
@media (prefers-reduced-motion: reduce){:root{--dur-fast:0ms;--dur-base:0ms;--dur-slow:0ms}}

/* Semantic aliases for Verae 2026 app shells (portal, admin, staff, ITAD, Sign, Verify) */
:root {
  --panel: var(--card);
  --accent: var(--plum);
  --accent-ink: var(--on-primary);
  --accent-soft: var(--plum-50);
  --soft: var(--plum-50);
  --danger: var(--err);
  --radius: var(--radius-lg);
  --shadow: 0 1px 2px rgba(29,21,52,.06), 0 8px 24px rgba(29,21,52,.08);
  --font-ui: var(--font-sans);
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0F0A14;
    --card: #1A1224;
    --panel: #1A1224;
    --ink: #F4EEF8;
    --muted: #B3A6C2;
    --line: #3A2A4A;
    --accent: #D7B4DE;
    --accent-ink: #1D1534;
    --accent-soft: #2A1A30;
    --soft: #2A1A30;
    --danger: #FF968C;
    --ok: #7FD9A5;
  }
}