/* ════════════════════════════════════════════════════════════════════════════
   InfinityAI — Air Design Tokens (Sprint A foundation)
   Single source of truth for colors / spacing / radius / shadow / motion / type.
   Three layers: primitive → semantic → component. Air CSS consumes the SEMANTIC and
   COMPONENT tokens; primitives are raw values that future themes re-map.
   Values match the current approved light look exactly (no visual change).
   Future themes override these tokens via [data-air-theme="…"] — components are untouched.
   ════════════════════════════════════════════════════════════════════════════ */

:root,
/* ── Content width ────────────────────────────────────────────────────────────────────────────────────
   Canonical maximum widths for a centred page container. Added because three surfaces (.air-container,
   .air-page, .air-compact) each hard-coded their own pixel value with no shared token, so "how wide is a
   page" had three answers and no name. Values match what those surfaces already rendered — this names the
   convention, it does not change it.

   --air-content-max-width        prose-led pages: reading measure comes first.
   --air-content-max-width-large  dense surfaces (tabbed pages, dashboards, data-heavy layouts) where a
                                  narrow column wastes most of a wide viewport.
   Generic by intent: nothing here is settings-specific.
   ──────────────────────────────────────────────────────────────────────────────────────────────────── */
:root {
    --air-content-max-width: 1100px;
    --air-content-max-width-large: 1200px;
}
[data-air-theme="light"] {
    /* ═══ Layer 1 — Primitive tokens (raw values) ═══ */
    --air-color-white: #ffffff;
    --air-color-black: #000000;

    --air-color-gray-50:  #f7f8fa;
    --air-color-gray-100: #f0f1f3;
    --air-color-gray-200: #e8eaed;
    --air-color-gray-300: #dcdfe3;
    --air-color-gray-400: #c4c9d0;
    --air-color-gray-450: #9aa1ab;
    --air-color-gray-500: #8b929d;
    --air-color-gray-600: #5b626c;
    --air-color-gray-900: #1f2329;
    --air-color-neutral-300: #cdd2d9;
    --air-color-neutral-400: #9ca3af;

    --air-color-blue-50:  #eef3ff;
    --air-color-blue-500: #3b6cf6;
    --air-color-blue-600: #2563eb;

    --air-color-green-500:    #16a34a;
    --air-color-green-bg:     #f3faf5;
    --air-color-green-border: #d7eede;

    --air-color-amber-500:    #d97706;
    --air-color-amber-bg:     #fdf8f0;
    --air-color-amber-border: #f3e3c8;

    --air-color-red-500:    #dc2626;
    --air-color-red-bg:     #fdf4f4;
    --air-color-red-border: #f3d6d6;

    /* Surfaces with alpha (overlays/blur) */
    --air-color-overlay-light: rgba(255, 255, 255, 0.82);
    --air-color-overlay-dark:  rgba(15, 20, 30, 0.40);
    --air-color-overlay-scrim: rgba(15, 20, 30, 0.34);

    /* Spacing scale */
    --air-space-0: 0;
    --air-space-1: 0.25rem;
    --air-space-2: 0.5rem;
    --air-space-3: 0.75rem;
    --air-space-4: 1rem;
    --air-space-5: 1.5rem;
    --air-space-6: 2.25rem;
    --air-space-8: 3rem;

    /* Radius scale */
    --air-radius-xs: 4px;
    --air-radius-sm: 7px;
    --air-radius-md: 10px;
    --air-radius-lg: 14px;
    --air-radius-xl: 20px;

    /* Shadow scale */
    --air-shadow-xs: 0 1px 3px rgba(15, 20, 30, 0.04);
    --air-shadow-sm: 0 1px 8px rgba(15, 20, 30, 0.05);
    --air-shadow-md: -4px 0 24px rgba(15, 20, 30, 0.12);

    /* Motion — short, subtle, professional. Components respect prefers-reduced-motion. */
    --air-duration-fast: .12s;
    --air-duration-normal: .18s;
    --air-duration-slow: .2s;
    --air-duration-slower: .32s;
    --air-ease-standard: ease;
    --air-ease-emphasized: cubic-bezier(0.2, 0, 0, 1);

    /* Typography */
    --air-font-family: inherit;
    --air-font-size-xs: 0.72rem;
    --air-font-size-sm: 0.8rem;
    --air-font-size-md: 0.875rem;
    --air-font-size-lg: 1rem;
    --air-font-size-xl: 1.4rem;
    --air-font-weight-normal: 450;
    --air-font-weight-medium: 500;
    --air-font-weight-semibold: 650;
    --air-line-height-tight: 1.2;
    --air-line-height-normal: 1.35;

    /* ═══ Layer 2 — Semantic tokens (meaning) ═══ */
    --air-bg:              var(--air-color-gray-50);
    /* DERIVED from emitted tokens (--air-bg/--air-surface/--air-text) so they FLIP under every theme —
       Infinity Light/Dark, High Contrast and any future theme — without the generator emitting them.
       Previously these were hardcoded LIGHT primitives that stayed light in Dark mode (cards blended,
       muted surfaces washed out). color-mix recomputes per-theme because custom props resolve at use-time. */
    --air-bg-muted:        color-mix(in srgb, var(--air-text) 4%, var(--air-bg));
    --air-surface:         var(--air-color-white);
    --air-surface-elevated:color-mix(in srgb, var(--air-text) 5%, var(--air-surface));
    --air-surface-floating:color-mix(in srgb, var(--air-text) 8%, var(--air-surface));
    --air-surface-subtle:  var(--air-bg);

    --air-border:        var(--air-color-gray-200);
    --air-border-soft:   var(--air-color-gray-100);
    --air-border-strong: var(--air-color-gray-300);

    --air-text:         var(--air-color-gray-900);
    --air-text-muted:   var(--air-color-gray-600);
    --air-text-subtle:  var(--air-color-gray-500);
    --air-text-inverse: var(--air-color-white);
    --air-icon:         var(--air-text-subtle);
    --air-icon-faint:   color-mix(in srgb, var(--air-text-subtle) 55%, var(--air-surface));

    /* Artifact toolbar controls (zoom/fit/pan + Open/Export/Copy/Fullscreen) — Sprint 23K.4.2.
       Defined at the SEMANTIC layer (NOT scoped to a component) so the ONE unified artifact toolbar
       resolves them everywhere — the icon-only zoom controls live in the card toolbar, a sibling of
       .air-artifact-renderer, so component-scoped control tokens never reached them (root cause of the
       too-dark zoom icons). They reference emitted semantics, so they FLIP under the Theme Engine
       (Infinity Light/Dark). Foreground uses --air-text-muted (stronger than the fainter --air-icon)
       so zoom glyphs stay clearly visible in dark mode. */
    --air-artifact-toolbar-fg:          var(--air-text-muted);
    --air-artifact-toolbar-muted-fg:    var(--air-text-subtle);
    --air-artifact-toolbar-hover-bg:    var(--air-hover);
    --air-artifact-toolbar-hover-fg:    var(--air-text);
    --air-artifact-toolbar-active-bg:   var(--air-selected);
    --air-artifact-toolbar-focus-ring:  var(--air-focus-ring);
    --air-artifact-toolbar-disabled-fg: var(--air-disabled);
    /* Back-compat aliases for the prior renderer-control token names (23K.3). */
    --air-rctl-fg:       var(--air-artifact-toolbar-fg);
    --air-rctl-fg-hover: var(--air-artifact-toolbar-hover-fg);
    --air-rctl-bg-hover: var(--air-artifact-toolbar-hover-bg);
    --air-rctl-focus:    var(--air-artifact-toolbar-focus-ring);

    --air-accent:       var(--air-color-blue-500);
    --air-accent-hover: var(--air-color-blue-600);
    --air-accent-soft:  var(--air-color-blue-50);
    --air-accent-text:  var(--air-color-white);

    /* Status surfaces DERIVE from the emitted status colour + emitted --air-surface, so the tinted
       backgrounds/borders flip with the theme (previously hardcoded pale primitives that stayed light,
       leaving light pastel chips/callouts in Dark mode). Text stays the full-strength status colour. */
    --air-success:        var(--air-color-green-500);
    --air-success-bg:     color-mix(in srgb, var(--air-success) 12%, var(--air-surface));
    --air-success-border: color-mix(in srgb, var(--air-success) 30%, var(--air-surface));
    --air-success-text:   var(--air-success);

    --air-warning:        var(--air-color-amber-500);
    --air-warning-bg:     color-mix(in srgb, var(--air-warning) 12%, var(--air-surface));
    --air-warning-border: color-mix(in srgb, var(--air-warning) 30%, var(--air-surface));
    --air-warning-text:   var(--air-warning);

    --air-danger:        var(--air-color-red-500);
    --air-danger-bg:     color-mix(in srgb, var(--air-danger) 12%, var(--air-surface));
    --air-danger-border: color-mix(in srgb, var(--air-danger) 30%, var(--air-surface));
    --air-danger-text:   var(--air-danger);

    --air-info:        var(--air-color-blue-600);
    --air-info-bg:     color-mix(in srgb, var(--air-info) 12%, var(--air-surface));
    --air-info-border: color-mix(in srgb, var(--air-info) 30%, var(--air-surface));
    --air-info-text:   var(--air-info);

    --air-neutral:    var(--air-color-neutral-400);
    --air-hover:      #f4f5f7;
    --air-selected:   #eef0f4;
    --air-focus-ring: var(--air-accent);
    --air-disabled:   var(--air-color-gray-400);

    /* Semantic spacing/radius/motion (canonical names + the prior set) */
    /* Canonical named spacing scale (2xs → 3xl). Every Air component consumes THESE — no arbitrary values. */
    --air-space-2xs: 0.125rem;
    --air-space-xs: var(--air-space-1);
    --air-space-sm: var(--air-space-2);
    --air-space-md: var(--air-space-4);
    --air-space-lg: var(--air-space-5);
    --air-space-xl: var(--air-space-6);
    --air-space-2xl: var(--air-space-8);
    --air-space-3xl: 4rem;
    --air-gap:      var(--air-space-4);
    --air-radius:   var(--air-radius-md);
    --air-transition: var(--air-duration-fast) var(--air-ease-standard);

    /* ═══ Layer 3 — Component tokens (specific roles) ═══ */
    /* Navigation hierarchy lives in THIS token layer (one place, theme-aware). Three identities:
       section header (quietest) < child item (readable, quiet) < top-level / hover / active (strong). */
    --air-sidebar-bg:               var(--air-surface);
    --air-sidebar-border:           var(--air-border);
    --air-sidebar-section:          var(--air-text-subtle);  /* section header — quietest, never competes */
    --air-sidebar-text:             color-mix(in srgb, var(--air-text) 42%, var(--air-text-muted)); /* child item — readable but CALM (dialled back from too-bright); below primary/active */
    --air-sidebar-secondary:        var(--air-text-muted);                                          /* secondary nav (chat folders) — quieter */
    --air-sidebar-recent:           var(--air-text-subtle);                                         /* recent history — quietest tier above section headers */
    --air-sidebar-text-strong:      var(--air-text);         /* top-level + hover + active label */
    --air-sidebar-text-muted:       var(--air-text-subtle);  /* (back-compat alias) */
    --air-sidebar-icon:             var(--air-text-subtle);  /* inactive icon — readable */
    --air-sidebar-hover-bg:         var(--air-hover);
    --air-sidebar-active-bg:        color-mix(in srgb, var(--air-accent) 14%, var(--air-surface)); /* "I am here" — accent tint, visible in every theme */
    --air-sidebar-active-text:      var(--air-text);
    --air-sidebar-active-icon:      var(--air-accent);        /* active icon follows the accent */
    --air-sidebar-active-indicator: var(--air-accent);
    --air-sidebar-footer-border:    var(--air-border);
    --air-sidebar-w: 272px;
    --air-rail-w:    66px;
    --air-topbar-bg: color-mix(in srgb, var(--air-surface) 85%, transparent);

    --air-card-bg:           var(--air-surface);
    --air-card-border:       var(--air-border);
    --air-card-radius:       var(--air-radius);
    --air-card-padding:      1.05rem 1.15rem;
    --air-card-hover-border: var(--air-border-strong);

    --air-table-header-text: var(--air-text-subtle);
    --air-table-border:      var(--air-border);
    --air-table-row-hover:   var(--air-hover);
    --air-table-text:        var(--air-text);
    --air-table-muted-text:  var(--air-text-subtle);

    --air-form-label:                var(--air-text);
    --air-form-helper:               var(--air-text-subtle);
    --air-form-control-bg:           var(--air-surface);
    --air-form-control-border:       var(--air-border);
    --air-form-control-focus-border: var(--air-accent);
    --air-form-actions-border:       var(--air-border-soft);
    --air-form-dirty:                var(--air-warning);

    --air-drawer-bg:     var(--air-surface);
    --air-drawer-border: var(--air-border);
    --air-drawer-shadow: var(--air-shadow-md);
    --air-drawer-scrim:  var(--air-color-overlay-scrim);

    --air-callout-info-bg:    var(--air-info-bg);
    --air-callout-success-bg: var(--air-success-bg);
    --air-callout-warning-bg: var(--air-warning-bg);
    --air-callout-danger-bg:  var(--air-danger-bg);

    /* ═══ Chat component tokens (Sprint E) — the chat surface derives from the design system.
       Structural tokens reference semantics, so they flip automatically under the Theme Engine
       (Infinity Light/Dark). Chat-specific accent / status / overlay primitives are centralised
       here as the single source of truth (exact Light values); they are theme-able in a future
       sprint by emitting them from the AirTheme model. air-chat.css references ONLY these. ═══ */
    /* Structural — flip under the engine */
    --air-chat-surface:        var(--air-surface);
    --air-chat-bg:             var(--air-bg);
    --air-chat-bg-muted:       var(--air-bg-muted);
    --air-chat-border:         var(--air-border);
    --air-chat-border-strong:  var(--air-border-strong);
    --air-chat-text:           var(--air-text);
    --air-chat-text-muted:     var(--air-text-muted);
    --air-chat-text-subtle:    var(--air-text-subtle);
    --air-chat-text-inverse:   var(--air-text-inverse);
    /* Accent family (chat purple) — exact Light values */
    --air-chat-accent:         #6b5bf5;
    --air-chat-accent-strong:  #3d4aab;
    --air-chat-accent-muted:   #8892c8;
    --air-chat-accent-deep:    #2a2d3e;
    --air-chat-accent-soft:    #eef0fc;
    --air-chat-accent-border:  #c7ccee;
    --air-chat-accent-a05:     rgba(107, 91, 245, 0.05);
    --air-chat-accent-a10:     rgba(107, 91, 245, 0.10);
    --air-chat-accent-a20:     rgba(107, 91, 245, 0.20);
    --air-chat-accent-a50:     rgba(107, 91, 245, 0.50);
    /* Links */
    --air-chat-link:           #1976d2;
    --air-chat-link-strong:    #1558b0;
    --air-chat-link-soft:      rgba(25, 118, 210, 0.20);
    --air-chat-link-faint:     rgba(25, 118, 210, 0.04);
    /* Status */
    --air-chat-danger:         #e53935;
    --air-chat-danger-strong:  #b5374c;
    --air-chat-danger-soft:    rgba(229, 57, 53, 0.20);
    --air-chat-danger-clear:   rgba(229, 57, 53, 0);
    --air-chat-warning:        #d97757;
    --air-chat-warning-strong: #e65100;
    /* Overlays (black, on light surfaces) — opacity scale */
    --air-chat-overlay-weak:   rgba(0, 0, 0, 0.05);
    --air-chat-overlay-soft:   rgba(0, 0, 0, 0.08);
    --air-chat-overlay:        rgba(0, 0, 0, 0.12);
    --air-chat-overlay-strong: rgba(0, 0, 0, 0.18);
    --air-chat-overlay-heavy:  rgba(0, 0, 0, 0.25);
    --air-chat-scrim:          rgba(0, 0, 0, 0.72);
    --air-chat-muted-soft:     rgba(110, 110, 110, 0.25);
    /* On-accent overlays (white, on colored/dark elements) */
    --air-chat-onaccent-weak:  rgba(255, 255, 255, 0.06);
    --air-chat-onaccent-soft:  rgba(255, 255, 255, 0.13);
    --air-chat-onaccent:       rgba(255, 255, 255, 0.24);

    /* ═══ Backward-compatible aliases (old names → new; do not remove without migrating usages) ═══ */
    --air-text-2:      var(--air-text-muted);
    --air-text-3:      var(--air-text-subtle);
    --air-ok:          var(--air-success);
    --air-warn:        var(--air-warning);
    --air-err:         var(--air-danger);
    --air-active-bg:   var(--air-selected);
    --air-radius-md-: var(--air-radius-md);
    --air-sp-sm:       var(--air-space-2);
    --air-sp-md:       var(--air-space-4);
    --air-sp-lg:       var(--air-space-5);
    --air-sp-section:  var(--air-space-6);
}

/* Dark theme — intentionally NOT implemented in Sprint A. The structure exists so a later sprint
   only overrides token VALUES here; no component CSS changes. */
[data-air-theme="dark"] {
    /* (Sprint B/C) override --air-bg / --air-surface / --air-text / … here. */
}