/* ==========================================================================
 * 01-tokens.css — Aulex design tokens (the ONLY file allowed to define color)
 * --------------------------------------------------------------------------
 * LOADED BY  : src/templates/base.html, on every page (first of the six
 *              core files — everything else consumes these custom
 *              properties, nothing here paints a pixel).
 * OWNS       : :root primitives + semantics, .ax-theme-light, .ax-theme-dark.
 * RULE       : no selectors other than the three above. No component may
 *              introduce a new #hex/rgb()/hsl() literal — add a token here
 *              instead, and record its contrast ratio in css/README.md.
 * ========================================================================== */

/* ── LAYER 1: BRAND PRIMITIVES ───────────────────────────────────────────
   Verbatim from the brand guideline image. Never referenced by a component
   rule directly — components only ever consume Layer 2 semantic tokens.
   Adding a value here requires a brand-guideline source, not a preference. */
:root {
  --ax-blue-500:   #0063FF;   /* brand primary   */
  --ax-ink-900:    #05080C;   /* brand near-black */
  --ax-ink-700:    #12181E;   /* brand dark surface */
  --ax-slate-500:  #3D434A;   /* brand slate grey */
  --ax-grey-200:   #C4C7CA;   /* brand light grey */
  --ax-white:      #FFFFFF;
  --ax-amber-500:  #FDAB02;   /* brand amber accent */

  /* Derived steps — documented derivations, not free invention */
  --ax-blue-300:   #4D8FFF;   /* blue-500 lightened — AA small-text/links on dark */
  --ax-blue-700:   #0049BD;   /* blue-500 darkened — hover/active fills */
  --ax-blue-900:   #002A6E;
  --ax-amber-300:  #FEC64D;
  --ax-amber-700:  #B87C00;
  --ax-ink-800:    #0A0F15;   /* midpoint ink-900 ↔ ink-700 */
  --ax-ink-600:    #1B222A;   /* ink-700 + ~6% white */
  --ax-ink-500:    #262E37;   /* ink-700 + ~12% white */
  --ax-slate-300:  #8A9099;   /* slate-500 + ~30% white */
  --ax-grey-100:   #E6E8EA;
  --ax-grey-050:   #F4F5F6;

  /* Status hues — the brand has no green/red swatch. Warning reuses the
     brand amber outright. Success/danger are derived to match amber's
     perceived lightness (~L 76) and are spaced ~110-120° apart in hue from
     both brand colors and each other, so a badge row reads as one family
     and colorblind users don't lose the amber/red distinction. See
     css/README.md "Color" for the full justification + contrast table. */
  --ax-green-500:  #16C97F;
  --ax-red-500:    #FF4D6A;
}

/* ── LAYER 2: SEMANTIC TOKENS — dark theme (site default) ────────────────
   Ratios are vs --ax-bg (#05080C) unless noted; see README for the full
   table. AA normal text needs 4.5:1, AA large text / UI components 3:1. */
:root, .ax-theme-dark {
  /* surfaces */
  --ax-bg:            var(--ax-ink-900);
  --ax-bg-wash:       radial-gradient(circle at 50% 0%, #0B1119 0%, var(--ax-bg) 80%);
  --ax-surface-1:     var(--ax-ink-700);    /* cards, panels, navbar (opaque) */
  --ax-surface-2:     var(--ax-ink-600);    /* nested surfaces, row hover, inputs */
  --ax-surface-3:     var(--ax-ink-500);    /* popovers, chips, pressed states */
  --ax-surface-glass: rgba(18, 24, 30, 0.72);
  --ax-surface-scrim: rgba(5, 8, 12, 0.72); /* modal/offcanvas backdrop */

  /* text — ratios vs --ax-bg: 19.6 / 11.9 / 6.2 / ~2.0 */
  --ax-text:           var(--ax-white);
  --ax-text-secondary: var(--ax-grey-200);
  --ax-text-muted:     var(--ax-slate-300);
  --ax-text-disabled:  var(--ax-slate-500);   /* non-text use only (~2:1) */
  --ax-text-on-primary: var(--ax-white);
  --ax-text-on-accent: var(--ax-ink-900);

  /* borders */
  --ax-border:         rgba(196, 199, 202, 0.14);
  --ax-border-strong:  var(--ax-slate-500);
  --ax-border-focus:   var(--ax-blue-500);

  /* primary — NOTE: #0063FF is ~4.1:1 on --ax-bg, which is AA for large
     text/icons/borders but NOT for normal-size body text. Use --ax-primary
     for fills, borders, icons and large text; use --ax-primary-text
     (6.4:1) for small text and links on a dark background. */
  --ax-primary:        var(--ax-blue-500);
  --ax-primary-hover:  var(--ax-blue-300);
  --ax-primary-active: var(--ax-blue-700);
  --ax-primary-text:   var(--ax-blue-300);
  --ax-primary-subtle: rgba(0, 99, 255, 0.14);
  --ax-accent:         var(--ax-amber-500);
  --ax-accent-subtle:  rgba(253, 171, 2, 0.14);

  /* status — -text for glyphs/labels, base for solid fills, -subtle for tints */
  --ax-success:        var(--ax-green-500);
  --ax-success-text:   var(--ax-green-500);
  --ax-success-subtle: rgba(22, 201, 127, 0.14);
  --ax-success-border: rgba(22, 201, 127, 0.45);
  --ax-warning:        var(--ax-amber-500);
  --ax-warning-text:   var(--ax-amber-500);
  --ax-warning-subtle: rgba(253, 171, 2, 0.14);
  --ax-warning-border: rgba(253, 171, 2, 0.45);
  --ax-danger:         var(--ax-red-500);
  --ax-danger-text:    var(--ax-red-500);
  --ax-danger-subtle:  rgba(255, 77, 106, 0.14);
  --ax-danger-border:  rgba(255, 77, 106, 0.45);
  --ax-info:           var(--ax-blue-500);
  --ax-info-text:      var(--ax-blue-300);
  --ax-info-subtle:    rgba(0, 99, 255, 0.14);
  --ax-info-border:    rgba(0, 99, 255, 0.45);
  --ax-neutral-text:   var(--ax-text-muted);
  --ax-neutral-subtle: rgba(196, 199, 202, 0.08);

  /* categorical (charts / legends) — brand-anchored, spread for hue separation */
  --ax-chart-1: var(--ax-blue-500);
  --ax-chart-2: var(--ax-amber-500);
  --ax-chart-3: var(--ax-green-500);
  --ax-chart-4: #D55181;
  --ax-chart-5: #9B7BFF;
  --ax-chart-6: #4CD7C0;
  --ax-chart-other: var(--ax-slate-300);
  --ax-chart-grid:  rgba(196, 199, 202, 0.10);

  /* elevation & focus */
  --ax-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.40);
  --ax-shadow-2: 0 8px 24px rgba(0, 0, 0, 0.45);
  --ax-shadow-3: 0 20px 48px rgba(0, 0, 0, 0.55);
  --ax-glow-primary: 0 0 24px rgba(0, 99, 255, 0.28);
  --ax-ring: 0 0 0 3px rgba(0, 99, 255, 0.40);

  /* shape */
  --ax-radius-sm: 6px;
  --ax-radius-md: 10px;
  --ax-radius-lg: 16px;
  --ax-radius-pill: 999px;

  /* space — 4px base */
  --ax-space-1: 4px;  --ax-space-2: 8px;  --ax-space-3: 12px; --ax-space-4: 16px;
  --ax-space-5: 20px; --ax-space-6: 24px; --ax-space-8: 32px; --ax-space-10: 48px;
  --ax-space-12: 64px;

  /* type */
  --ax-font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --ax-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --ax-text-2xs: 0.6875rem; --ax-text-xs: 0.75rem;  --ax-text-sm: 0.8125rem;
  --ax-text-md:  0.875rem;  --ax-text-base: 1rem;   --ax-text-lg: 1.125rem;
  --ax-text-xl:  1.375rem;  --ax-text-2xl: 1.75rem;
  --ax-text-3xl: clamp(2rem, 4vw, 3rem);
  --ax-leading-tight: 1.2; --ax-leading: 1.55;
  --ax-weight-regular: 400; --ax-weight-medium: 500;
  --ax-weight-semibold: 600; --ax-weight-bold: 700; --ax-weight-black: 900;
  --ax-tracking-tight: -0.02em; --ax-tracking-caps: 0.06em;

  /* motion */
  --ax-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ax-dur-fast: 120ms; --ax-dur: 200ms; --ax-dur-slow: 320ms;

  /* layout constants */
  --ax-navbar-h: 80px;
  --ax-content-max: 1440px;
  --ax-z-sticky: 100; --ax-z-navbar: 1030; --ax-z-overlay: 1040;
  --ax-z-modal: 1055; --ax-z-toast: 1090;
}

/* ── LAYER 3: LIGHT SURFACE SCOPE ─────────────────────────────────────────
   The only sanctioned light context. Apply `.ax-theme-light` to an
   ancestor (body, a section, a floating panel) to flip every semantic
   token for that subtree — never override background/color with
   !important. See README "Theming" and CLAUDE.md UI Conventions rule 11. */
.ax-theme-light {
  --ax-bg:             var(--ax-white);
  --ax-bg-wash:        none;
  --ax-surface-1:      var(--ax-white);
  --ax-surface-2:      var(--ax-grey-050);
  --ax-surface-3:      var(--ax-grey-100);
  --ax-surface-glass:  rgba(255, 255, 255, 0.86);
  --ax-surface-scrim:  rgba(5, 8, 12, 0.45);

  --ax-text:           var(--ax-ink-900);
  --ax-text-secondary: var(--ax-slate-500);
  --ax-text-muted:     #6E747B;
  --ax-text-disabled:  #A9AEB3;

  --ax-border:         rgba(5, 8, 12, 0.12);
  --ax-border-strong:  var(--ax-grey-200);

  --ax-primary-text:   var(--ax-blue-700);   /* #0063FF is only ~4.1:1 on white */
  --ax-success-text:   #0E9A60;
  --ax-warning-text:   #A8730A;
  --ax-danger-text:    #C4344E;
  --ax-info-text:      var(--ax-blue-700);
  --ax-success-subtle: rgba(22, 201, 127, 0.12);
  --ax-warning-subtle: rgba(253, 171, 2, 0.16);
  --ax-danger-subtle:  rgba(255, 77, 106, 0.12);
  --ax-info-subtle:    rgba(0, 99, 255, 0.10);

  --ax-shadow-1: 0 1px 2px rgba(5, 8, 12, 0.08);
  --ax-shadow-2: 0 8px 24px rgba(5, 8, 12, 0.12);
  --ax-shadow-3: 0 20px 48px rgba(5, 8, 12, 0.18);
  --ax-ring: 0 0 0 3px rgba(0, 99, 255, 0.30);
}