/* ==========================================================================
   Appservices — design tokens (P6 PR-6, D-244). Primitives only (plus a few light defaults at the end): what a
   value IS, never where it is used. Each app keeps its own names and maps them here — the landing and the legal
   pages (site.css, legal.css, privacy.css), the account web app (app.css: light and dark) and the Admin Dashboard
   (admin.css: its accent and its badges; its greys and its system font stack are its own).
   Three byte-equal copies, each served from its app's own folder (one CSP, one cache, one version each):
     web/static/site/assets/css/tokens.css · web/account_app/css/tokens.css · web/static/admin/css/tokens.css
   Change all three together (tests/core/test_design_tokens.py compares them); every page links this file first.
   The brand scale is centred on the logo's blue: --as-brand-600 = #0046EE. The landing's older names are one step
   off (its --brand-600 is --as-brand-700, its --brand-700 is --as-brand-800); the values are unchanged.
   The support widget (web/static/widget/widget.css) keeps its own literals (it is loaded into pages that may not
   link this file); a test holds them equal to these. /sython keeps its own sub-brand and links nothing here.
   ========================================================================== */
:root {
  /* brand: the logo's blue, light to dark */
  --as-brand-50: #F0F4FF;
  --as-brand-100: #DDE7FF;
  --as-brand-200: #BCD0FF;
  --as-brand-300: #6D9BFF;
  --as-brand-400: #3D74FF;
  --as-brand-500: #2F63EA;
  --as-brand-600: #0046EE;
  --as-brand-700: #003BD0;
  --as-brand-800: #0031AE;
  --as-cyan-400: #38BDF8;

  /* neutrals on light surfaces (cool grey-blue), white to ink */
  --as-neutral-0: #FFFFFF;
  --as-neutral-50: #F6F8FC;
  --as-neutral-75: #F0F4FA;
  --as-neutral-100: #EEF2F9;
  --as-neutral-150: #E3E9F3;
  --as-neutral-200: #D3DCEB;
  --as-neutral-500: #65738C;
  --as-neutral-600: #56647D;
  --as-neutral-800: #27324A;
  --as-neutral-950: #0A1226;

  /* navy: the landing's dark sections */
  --as-navy-700: #16295A;
  --as-navy-800: #0C1F47;
  --as-navy-900: #071531;
  --as-navy-950: #050B1E;
  --as-navy-line: rgba(148, 173, 230, .16);

  /* night: the dashboard's dark theme, darkest surface to lightest text, and the brand on it */
  --as-night-950: #0A1122;
  --as-night-900: #101A31;
  --as-night-850: #14213F;
  --as-night-800: #15223F;
  --as-night-750: #1B2C55;
  --as-night-700: #24324F;
  --as-night-600: #2E3E60;
  --as-night-300: #9AA8C2;
  --as-night-200: #C9D3E6;
  --as-night-100: #E6ECF7;
  --as-night-brand: #4C82FF;

  /* status: 50 = a light tint, 300 = text on dark, 500-700 = text or mark on light, 950 = a dark tint */
  --as-ok-50: #E7F6EE;
  --as-ok-300: #3DD68C;
  --as-ok-500: #12A150;
  --as-ok-600: #0F8A44;
  --as-ok-700: #0A6B3F;
  --as-ok-950: #0F2E22;
  --as-warn-50: #FFF4E0;
  --as-warn-300: #F5C46B;
  --as-warn-400: #E8A317;
  --as-warn-700: #9A5B00;
  --as-warn-950: #33270F;
  --as-danger-50: #FDECEC;
  --as-danger-300: #FF7A7F;
  --as-danger-600: #C0262D;
  --as-danger-950: #3A1519;
  --as-info-50: #EEF3FF;

  /* radii (named by size) */
  --as-radius-8: 8px;
  --as-radius-10: 10px;
  --as-radius-12: 12px;
  --as-radius-14: 14px;
  --as-radius-16: 16px;
  --as-radius-20: 20px;
  --as-radius-22: 22px;
  --as-radius-30: 30px;
  --as-radius-pill: 999px;

  /* shadows: the landing's (xs-l, brand), the dashboard's cards, the floating widget */
  --as-shadow-xs: 0 1px 2px rgba(7, 21, 49, .06);
  --as-shadow-s: 0 1px 2px rgba(7, 21, 49, .05), 0 2px 8px -2px rgba(7, 21, 49, .06);
  --as-shadow-m: 0 2px 6px rgba(7, 21, 49, .04), 0 14px 34px -14px rgba(7, 21, 49, .18);
  --as-shadow-l: 0 10px 24px -10px rgba(7, 21, 49, .14), 0 36px 80px -28px rgba(7, 21, 49, .32);
  --as-shadow-brand: 0 1px 0 rgba(255, 255, 255, .22) inset, 0 10px 24px -10px rgba(0, 70, 238, .65);
  --as-shadow-card-s: 0 1px 2px rgba(7, 21, 49, .06), 0 2px 8px -2px rgba(7, 21, 49, .06);
  --as-shadow-card-m: 0 2px 6px rgba(7, 21, 49, .05), 0 14px 34px -14px rgba(7, 21, 49, .2);
  --as-shadow-float: 0 2px 6px rgba(7, 21, 49, .08), 0 18px 40px -12px rgba(7, 21, 49, .35);

  /* spacing, type scale, motion, page gutter */
  --as-space-1: 4px;
  --as-space-2: 8px;
  --as-space-3: 12px;
  --as-space-4: 16px;
  --as-space-5: 24px;
  --as-space-6: 32px;
  --as-text-xs: 12px;
  --as-text-sm: 13px;
  --as-text-base: 15px;
  --as-text-md: 16px;
  --as-text-lg: 18px;
  --as-text-xl: 24px;
  --as-ease: cubic-bezier(.2, .7, .2, 1);
  --as-gutter: clamp(16px, 4vw, 32px);

  /* z-index layers: headers < the support widget < dialogs (the top layer) < toasts */
  --as-z-header: 40;
  --as-z-widget: 55;
  --as-z-dialog: 60;
  --as-z-toast: 70;

  /* font stacks (the faces are self-hosted: fonts.css on the landing, @font-face in app.css) */
  --as-font-display: "Plus Jakarta Sans", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --as-font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --as-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --as-font-arabic: "IBM Plex Sans Arabic", "Inter", "Segoe UI", Tahoma, sans-serif;
  --as-font-arabic-display: "IBM Plex Sans Arabic", "Plus Jakarta Sans", "Segoe UI", Tahoma, sans-serif;
  --as-font-system: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --as-font-system-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  /* light defaults for a new page (the apps above map the primitives under their own names instead) */
  --as-color-text: var(--as-neutral-950);
  --as-color-text-2: var(--as-neutral-800);
  --as-color-muted: var(--as-neutral-600);
  --as-color-bg: var(--as-neutral-0);
  --as-color-bg-2: var(--as-neutral-50);
  --as-color-line: var(--as-neutral-150);
  --as-color-accent: var(--as-brand-600);
  --as-color-accent-hover: var(--as-brand-800);
  --as-color-on-accent: var(--as-neutral-0);
  --as-color-ok: var(--as-ok-600);
  --as-color-warn: var(--as-warn-700);
  --as-color-danger: var(--as-danger-600);
}