/* ==========================================================================
   AVA Co-Pilot — Design System tokens
   Dark "deep navy + neon aqua" theme.

   Single source of truth for every colour, radius, shadow and motion value.
   The canonical palette lives at the top; every legacy token name still used
   across the area stylesheets is re-mapped onto that palette below, so the
   whole app shares one look.

   RULES THAT MATTER:
   - Selection / active states are a NEUTRAL slate fill + inset ring — never a
     teal/green tinted wash and never the retired teal-navy tones.
   - Aqua (#0AF3DB) is a SIGNAL colour only: logo, primary buttons, focus
     rings, active tab underline, toggles ON, selected avatars, required "*".
   - No gradients as decoration. No transparent "washed" buttons.
   - Danger is a MUTED brick red (#9C5651), never neon red.
   - No CSS transition on the `background` of selectable rows/tabs/nav.
   ========================================================================== */

:root {
    /* Tells the browser which appearance its own surfaces have — the overscroll and
       safe-area fills around the page, native scrollbars and form controls. Without it
       those stay dark after a switch to light until the page is reloaded. */
    color-scheme: dark;

    /* ---- Navy surfaces (darkest → lightest) ---- */
    --ava-ink:         #00131f; /* deepest: app canvas / left settings rail */
    --ava-navy:        #001E30; /* base background / input fields */
    --ava-navy-deep:   #001827; /* panels, navbar, modal shell */
    --ava-navy-raised: #002A43; /* raised chrome, composer */
    --ava-card:        #04293c; /* elevated card surface */

    /* ---- Brand accents ---- */
    --ava-aqua:  #0AF3DB; /* primary neon accent (the AVA signal colour) */
    --ava-cyan:  #4be8ff; /* secondary accent */
    --ava-green: #14f3a1; /* positive / online */

    /* ---- Danger (muted, not neon) ---- */
    --ava-danger-text:  #e2938d; /* destructive text/icon on dark */
    --ava-danger-solid: #9C5651; /* destructive solid button */

    /* ---- Text on dark ---- */
    --ava-text-1: #EAF6F8; /* primary text */
    --ava-text-2: #9FB6BE; /* secondary text, labels */
    --ava-text-3: #859AA1; /* muted, placeholders, captions */

    /* ---- Hairlines (semi-transparent slate) ---- */
    --ava-line-soft:   rgba(159,182,190,0.10);
    --ava-line:        rgba(159,182,190,0.16);
    --ava-line-strong: rgba(159,182,190,0.22);

    /* ---- Neutral selection + secondary surfaces (NO teal/green) ---- */
    --ava-select:      rgba(159,182,190,0.16); /* selected/active fill */
    --ava-select-ring: rgba(159,182,190,0.20); /* 1px inset ring on selection */
    --ava-hover:       rgba(255,255,255,0.05);  /* generic row/nav hover */
    --ava-btn-2:       #222A32; /* secondary button fill */
    --ava-btn-2-hover: #2A333C; /* secondary button hover */

    /* ---- Accent tints + focus ---- */
    --ava-aqua-08: rgba(10,243,219,0.08);
    --ava-aqua-12: rgba(10,243,219,0.12);
    --ava-aqua-22: rgba(10,243,219,0.22);
    --ava-focus:   rgba(10,243,219,0.50);
    --ava-focus-r: rgba(10,243,219,0.18);

    /* ---- Radii ---- */
    --r-xs: 8px;  --r-sm: 10px;  --r-md: 12px;  --r-lg: 14px;  --r-xl: 16px;  --r-pill: 999px;

    /* ---- Shadows ---- */
    --shadow-card:  0 14px 32px -16px rgba(0,0,0,0.55);
    --shadow-panel: 0 18px 44px -18px rgba(0,0,0,0.60);
    --shadow-modal: 0 34px 90px rgba(0,0,0,0.62);

    /* ---- Type ---- */
    --font-sans: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-mono: ui-monospace, Menlo, Consolas, monospace;

    /* ======================================================================
       LEGACY TOKEN ALIASES
       Every name the existing area stylesheets reference, re-pointed onto the
       palette above. Kept so those files keep working while sharing the look.
       ====================================================================== */

    /* Brand / backgrounds */
    --ava-bg-0: var(--ava-ink);
    --ava-bg-1: var(--ava-navy-raised);
    --ava-bg-2: var(--ava-navy);
    --ava-bg-3: var(--ava-navy-deep);
    --ava-accent: var(--ava-aqua);
    --ava-accent-2: var(--ava-cyan);
    --ava-accent-3: var(--ava-aqua);
    --ava-accent-warm: var(--ava-green);
    /* soft accent fills are the NEUTRAL slate selection — never an aqua wash */
    --ava-accent-soft:   var(--ava-select);
    --ava-accent-soft-2: rgba(159,182,190,0.10);
    --ava-accent-soft-3: var(--ava-hover);

    /* Text */
    --ava-text: var(--ava-text-1);
    --ava-text-soft: var(--ava-text-2);
    --ava-text-muted: var(--ava-text-3);
    --ava-text-faint: rgba(133,154,161,0.60);
    --ava-text-base: var(--ava-text-1);

    /* Feedback */
    --ava-danger: var(--ava-danger-text);
    --ava-danger-2: var(--ava-danger-solid);
    --ava-warning: #d9a441;
    --ava-ok: var(--ava-green);

    /* App background — flat navy, no decorative radial glow */
    --ava-app-bg: var(--ava-navy);

    /* Surfaces (semantic) */
    --ava-panel:   var(--ava-navy-deep);
    --ava-panel-2: var(--ava-navy-raised);
    --ava-panel-3: var(--ava-card);
    --ava-glass:   rgba(255,255,255,0.03);
    --ava-glass-2: rgba(255,255,255,0.05);
    --ava-surface-0: var(--ava-ink);
    --ava-surface-1: var(--ava-panel);
    --ava-surface-2: var(--ava-panel-2);
    --ava-surface-3: var(--ava-panel-3);

    /* Borders / rings */
    --ava-border-0: var(--ava-line-soft);
    --ava-border-1: var(--ava-line);
    --ava-border-2: var(--ava-line-strong);
    --ava-ring:   0 0 0 3px var(--ava-focus-r);
    --ava-ring-2: 0 0 0 3px var(--ava-focus-r);
    --ava-focus-ring: 0 0 0 3px var(--ava-focus-r);

    /* Radii (legacy names) */
    --ava-radius-sm: var(--r-sm);
    --ava-radius-md: var(--r-md);
    --ava-radius-lg: var(--r-xl);

    /* Spacing */
    --ava-space-1: 6px;
    --ava-space-2: 10px;
    --ava-space-3: 14px;
    --ava-space-4: 18px;

    /* Shadows (legacy names) */
    --ava-shadow: var(--shadow-card);
    --ava-shadow-soft: var(--shadow-panel);
    --ava-shadow-edge: 0 0 0 1px rgba(255,255,255,0.04) inset;

    /* Typography (legacy names) */
    --ava-font-sans: var(--font-sans);
    --ava-font-size: 14px;
    --ava-line: 1.4;

    /* Motion */
    --ava-ease: cubic-bezier(.2,.8,.2,1);
    --ava-dur-1: 140ms;
    --ava-dur-2: 220ms;

    /* Generic list items → neutral */
    --ava-list-item-bg: transparent;
    --ava-list-item-border: var(--ava-line-soft);
    --ava-list-item-hover-bg: var(--ava-hover);
    --ava-list-item-hover-border: var(--ava-line);
    --ava-list-item-active-bg: var(--ava-select);
    --ava-list-item-active-border: var(--ava-select-ring);

    /* Scrollbar */
    --ava-scroll-thumb: var(--ava-line-strong);
    --ava-scroll-thumb-hover: rgba(159,182,190,0.34);
    --ava-scroll-track: transparent;
    --ava-scroll-border: var(--ava-navy-deep);
    --ava-scroll-size: 10px;
    --ava-scroll-radius: 999px;

    /* Base hue tokens */
    --ava-white: #ffffff;
    --ava-black: #000000;
    --ava-online: var(--ava-green);
    --ava-info: var(--ava-cyan);
    --ava-success: var(--ava-green);
    --ava-partner: var(--ava-cyan);
    --ava-cyan: #4be8ff;
    --ava-bg-deep: var(--ava-ink);
    --ava-bg-header: var(--ava-navy-deep);
    --ava-demo: #d9a441;
    --ava-demo-text: #e0be74;
    --ava-danger-soft: var(--ava-danger-text);
    --ava-danger-link: var(--ava-danger-text);
    --ava-danger-link-hover: #eaa9a3;
    --ava-danger-validation: var(--ava-danger-text);
    --ava-danger-faint: rgba(226,147,141,0.70);
    --ava-danger-glow: var(--ava-danger-solid);
    --ava-red-pure: var(--ava-danger-solid);
    --ava-accent-deep: #08c8b4;
    --ava-ok-deep: #10c07f;
    --ava-danger-grad: var(--ava-danger-solid);
    --ava-danger-grad-hover: #a85f59;
    --ava-chat-send-1: var(--ava-navy-raised);
    --ava-chat-send-2: var(--ava-navy-deep);
    --ava-chat-action-border: var(--ava-line);
    --ava-chat-action-glow: var(--ava-aqua-22);
    --ava-chat-action-border-hover: var(--ava-line-strong);
    --ava-logo-preview-1: #102329;
    --ava-logo-preview-2: #071316;
    --ava-lightgray: #d3d3d3;

    /* Theme-invariant "fixed" palette */
    --ava-ink-0: var(--ava-ink);
    --ava-ink-1: var(--ava-navy-raised);
    --ava-ink-2: var(--ava-navy);
    --ava-ink-3: var(--ava-navy-deep);
    --ava-teal: var(--ava-aqua);
    --ava-teal-2: var(--ava-cyan);
    --ava-warm: var(--ava-green);
    --ava-red: var(--ava-danger-solid);
    --ava-danger-pale: #f0d6d3;
    --ava-green: #14f3a1;
    --ava-pink: var(--ava-danger-solid);

    /* ---- Chat surface tokens (flat, neutral selection) ---- */
    --ava-chat-glass-1: rgba(255,255,255,0.03);
    --ava-chat-glass-2: rgba(255,255,255,0.05);
    --ava-chat-glass-3: rgba(255,255,255,0.07);
    --ava-chat-sidebar-border: var(--ava-line-soft);
    --ava-chat-sidebar-bg-1: var(--ava-ink);
    --ava-chat-sidebar-bg-2: var(--ava-ink);
    --ava-chat-sidebar-head-bg-1: transparent;
    --ava-chat-sidebar-head-bg-2: transparent;
    --ava-chat-btn-grad-1: var(--ava-aqua);
    --ava-chat-btn-grad-2: var(--ava-aqua);
    --ava-chat-btn-text: var(--ava-navy);
    --ava-chat-btn-shadow: transparent;
    --ava-chat-btn-shadow-hover: transparent;
    --ava-chat-btn-border: var(--ava-aqua);
    --ava-chat-btn-border-hover: var(--ava-aqua);
    --ava-chat-icon-btn-bg: var(--ava-btn-2);
    --ava-chat-icon-btn-bg-hover: var(--ava-btn-2-hover);
    --ava-chat-icon-btn-border: var(--ava-line);
    --ava-chat-icon-btn-border-hover: var(--ava-line-strong);
    --ava-chat-icon-muted: var(--ava-text-3);
    --ava-chat-list-hover-bg: var(--ava-hover);
    --ava-chat-msg-border: var(--ava-line-soft);
    --ava-chat-msg-bg: var(--ava-navy-deep);
    --ava-chat-msg-bot-border: var(--ava-line-soft);
    --ava-chat-msg-bot-bg-overlay: transparent;
    --ava-chat-msg-bot-bg: #022838;
    --ava-chat-msg-user-glow: transparent;
    --ava-chat-msg-user-bg-1: var(--ava-navy-raised);
    --ava-chat-msg-user-bg-2: var(--ava-navy-raised);
    --ava-chat-msg-user-border: var(--ava-line);
    --ava-chat-error-bg: rgba(156,86,81,0.14);
    --ava-chat-error-border: rgba(156,86,81,0.40);
    --ava-chat-error-text: var(--ava-danger-text);
    --ava-chat-error-shadow: transparent;
    --ava-chat-link: var(--ava-cyan);
    --ava-chat-chip-bg: rgba(159,182,190,0.08);
    --ava-chat-chip-border: var(--ava-line);
    --ava-chat-chip-text: var(--ava-text-1);
    --ava-chat-doc-bg: rgba(159,182,190,0.08);
    --ava-chat-doc-bg-hover: var(--ava-hover);
    --ava-chat-doc-border: var(--ava-line);
    --ava-chat-doc-border-hover: var(--ava-line-strong);
    --ava-chat-doc-text: var(--ava-text-1);
    --ava-chat-hint-divider: var(--ava-line-soft);
    --ava-chat-input-border: var(--ava-line);
    --ava-chat-input-bg: var(--ava-navy);
    --ava-chat-input-bg-focus: var(--ava-navy);
    --ava-chat-input-focus-border: var(--ava-focus);
    --ava-chat-file-bg: var(--ava-btn-2);
    --ava-chat-file-bg-hover: var(--ava-btn-2-hover);
    --ava-chat-file-border: var(--ava-line);
    --ava-chat-file-border-hover: var(--ava-line-strong);
    --ava-chat-file-icon: var(--ava-aqua);
    --ava-chat-danger-bg: rgba(156,86,81,0.16);
    --ava-chat-danger-border: rgba(156,86,81,0.42);
    --ava-chat-send-border: var(--ava-aqua);
    --ava-chat-send-grad-1: var(--ava-aqua);
    --ava-chat-send-grad-2: var(--ava-aqua);
    --ava-chat-send-border-hover: var(--ava-aqua);
    --ava-chat-send-shadow: transparent;
    --ava-chat-send-shadow-hover: transparent;
    --ava-chat-elev: rgba(0,0,0,0.22);
    --ava-chat-scroll-thumb: var(--ava-line-strong);
    --ava-chat-scroll-thumb-hover: rgba(159,182,190,0.34);
    --ava-chat-scroll-thumb-border: var(--ava-navy-deep);

    /* Buttons (legacy variant tokens) */
    --ava-btn-radius: var(--r-sm);
    --ava-btn-primary-grad-1: var(--ava-aqua);
    --ava-btn-primary-grad-2: var(--ava-aqua);
    --ava-btn-primary-text: var(--ava-navy);
    --ava-btn-primary-border: var(--ava-aqua);
    --ava-btn-primary-border-hover: var(--ava-aqua);
    --ava-btn-primary-shadow: transparent;
    --ava-btn-primary-shadow-hover: transparent;
    --ava-btn-danger-bg: var(--ava-danger-solid);
    --ava-btn-danger-bg-hover: var(--ava-danger-solid);
    --ava-btn-danger-text: #ffffff;
    --ava-btn-danger-border: var(--ava-danger-solid);
    --ava-btn-danger-border-hover: var(--ava-danger-solid);
    --ava-btn-danger-shadow: transparent;
    --ava-btn-danger-shadow-hover: transparent;
    --ava-chat-newbtn-radius: var(--r-sm);
    --ava-chat-newbtn-bg-1: var(--ava-aqua);
    --ava-chat-newbtn-bg-2: var(--ava-aqua);
    --ava-chat-newbtn-text: var(--ava-navy);
    --ava-chat-newbtn-border: var(--ava-aqua);
    --ava-chat-newbtn-border-hover: var(--ava-aqua);
    --ava-chat-newbtn-shadow: transparent;
    --ava-chat-newbtn-shadow-hover: transparent;
    --ava-chat-newbtn-hover-brightness: 1.06;
    --ava-chat-newbtn-active-brightness: 0.98;
    --ava-chat-newbtn-focus-ring: var(--ava-focus-ring);
    --ava-chat-newbtn-disabled-opacity: 0.58;
    --ava-chat-item-bg: transparent;
    --ava-chat-item-border: transparent;
    --ava-chat-item-hover-bg: var(--ava-hover);
    --ava-chat-item-hover-border: transparent;
    --ava-chat-item-active-bg: var(--ava-select);
    --ava-chat-item-active-border: var(--ava-select-ring);
    --ava-chat-item-shadow: none;

    /* Prompts score pills */
    --ava-score-pill-bg: rgba(159,182,190,0.08);
    --ava-score-pill-border: var(--ava-line);
    --ava-score-pill-text: var(--ava-text-1);
    --ava-score-pill-shadow: var(--ava-shadow-edge);
    --ava-score-pill-active-bg: var(--ava-select);
    --ava-score-pill-active-border: var(--ava-select-ring);
    --ava-score-pill-active-shadow: 0 0 0 1px var(--ava-select-ring) inset;

    /* Login tokens */
    --ava-login-bg: var(--ava-navy);
    --ava-login-blob-1: transparent;
    --ava-login-blob-2: transparent;
    --ava-login-blob-3: transparent;
    --ava-login-card-bg: var(--ava-card);
    --ava-login-card-border: var(--ava-line);
    --ava-login-card-shadow: var(--shadow-card);
    --ava-login-card-blur: 0px;
    --ava-login-title: var(--ava-text-1);
    --ava-login-title-shadow: none;
    --ava-login-input-bg: var(--ava-navy);
    --ava-login-input-border: var(--ava-line);
    --ava-login-input-border-focus: var(--ava-focus);
    --ava-login-input-text: var(--ava-text-1);
    --ava-login-input-placeholder: var(--ava-text-3);
    --ava-login-input-ring: var(--ava-focus-ring);
    --ava-login-btn-bg-1: var(--ava-aqua);
    --ava-login-btn-bg-2: var(--ava-aqua);
    --ava-login-btn-text: var(--ava-navy);
    --ava-login-btn-shadow: transparent;
    --ava-login-btn-shadow-hover: transparent;
    --ava-login-btn-border: var(--ava-aqua);
    --ava-login-btn-border-hover: var(--ava-aqua);
    --ava-login-aux-bg: var(--ava-btn-2);
    --ava-login-aux-border: var(--ava-line);
    --ava-login-aux-text: var(--ava-text-2);
    --ava-login-aux-hover-bg: var(--ava-btn-2-hover);
    --ava-login-aux-hover-border: var(--ava-line-strong);
    --ava-login-msg-error: var(--ava-danger-text);
    --ava-login-msg-success: var(--ava-green);
    --ava-login-msg-text: var(--ava-text-2);
    --ava-login-back-bg: transparent;
    --ava-login-back-border: var(--ava-line);
    --ava-login-back-text: var(--ava-text-1);
    --ava-login-back-hover-bg: var(--ava-hover);
    --ava-login-back-hover-border: var(--ava-line-strong);
    --ava-login-flip-dur: 600ms;
    --ava-login-card-radius: var(--r-xl);
    --ava-login-card-maxw: 420px;

    /* iOS pull-to-refresh backdrop */
    --ava-pull-bg: var(--ava-ink);

    /* ======================================================================
       FOUNDATION EXTENSIONS — the single source of truth for every colour
       the shipped app actually uses. Values mirror the live UI exactly.

       RGB triplets exist so alpha variants compose from ONE definition:
           rgba(var(--ava-rgb-slate), 0.16)  ==  rgba(159,182,190,0.16)
       Retinting a triplet (e.g. for a light theme) retints every alpha
       variant that composes from it.
       ====================================================================== */

    /* ---- RGB triplets (for rgba(var(--ava-rgb-*), <alpha>) composition) ---- */
    --ava-rgb-slate: 159,182,190;   /* hairlines, neutral fills             */
    --ava-rgb-aqua: 10,243,219;     /* accent tints, focus rings            */
    --ava-rgb-green: 20,243,161;    /* success tints                        */
    --ava-rgb-red: 255,107,107;     /* destructive tints (shipped red)      */
    --ava-rgb-brick: 156,86,81;     /* muted brick danger tints             */
    --ava-rgb-white: 255,255,255;   /* glass overlays                       */
    --ava-rgb-black: 0,0,0;         /* shadows                              */
    --ava-rgb-text: 234,246,248;    /* primary-text tints                   */
    --ava-rgb-cyan: 75,232,255;     /* secondary-accent tints               */
    --ava-rgb-warning: 217,164,65;  /* demo/warning tints                   */
    --ava-rgb-on-accent: 1,34,50;   /* dark-on-aqua tints (spinner rims)    */
    --ava-rgb-overlay: 0,12,20;     /* modal/confirm overlay backdrop       */
    --ava-rgb-overlay-2: 0,8,12;    /* settings overlay backdrop            */
    --ava-rgb-navy: 0,30,48;        /* --ava-navy (#001E30) as a triplet    */
    --ava-rgb-navy-deep: 0,24,39;   /* --ava-navy-deep (#001827) as triplet */
    --ava-rgb-ice: 228,255,250;     /* pale aqua-glow core (radial accents) */
    --ava-rgb-amber: 255,176,32;    /* amber warning tints (setup guide)    */
    --ava-rgb-red-bright: 255,77,77;/* bright error tints (setup guide)     */
    --ava-rgb-red-pale: 255,220,220;/* pale error text tints                */
    --ava-rgb-danger-text: 226,147,141; /* --ava-danger-text as a triplet   */
    --ava-rgb-slate-300: 198,214,219;   /* --ava-slate-300 as a triplet     */

    /* ---- Remaining shipped one-off hues (defined once, referenced app-wide) ---- */
    --ava-aqua-deep: #0bbfae;       /* avatar-gradient end (aqua → deep)    */
    --ava-slate-900: #5E7782;       /* darkest slate meta text              */
    --ava-slate-950: #6C7A85;       /* near-invisible slate                 */
    --ava-card-alt: #07293B;        /* alternate card fill (guide panels)   */
    --ava-green-mid: #3FCF8E;       /* mid green status                     */

    /* ---- Full-screen loader (Pulse-Halo: breathing brain + ripple rings) ----
       The backdrop aliases the app-shell background so boot → app is seamless
       in either theme; only ring and text carry loader-specific hues. */
    --ava-loader-bg: var(--ava-navy);
    --ava-loader-ring: rgba(123,208,200,0.55);
    --ava-loader-text: #EAF6F8;
    --ava-green-alt: #5FB84A;       /* alternate green status               */
    --ava-ink-deepest: #001120;     /* deepest backdrop                     */
    --ava-danger-pale-2: #f0c9c6;   /* palest danger text (chat errors)     */
    --ava-ice-text: #cfe9ee;        /* pale ice-cyan info text              */

    --ava-rgb-brain-glow: 10,243,219;  /* node glow — theme-invariant aqua   */

    /* ---- Slate text ramp (light → dark). text-1/2/3 sit inside this ramp. ---- */
    --ava-slate-100: #EAF6F8;  /* == --ava-text-1: primary text            */
    --ava-slate-200: #DCEAEC;  /* bright body text (result output)         */
    --ava-slate-300: #C6D6DB;  /* light secondary (ghost-button text)      */
    --ava-slate-400: #B4C7CD;  /* soft body (justifications)               */
    --ava-slate-500: #9FB6BE;  /* == --ava-text-2: secondary text, labels  */
    --ava-slate-600: #8CA3AB;  /* muted meta (kickers, sublines)           */
    --ava-slate-700: #859AA1;  /* == --ava-text-3: muted, captions         */
    --ava-slate-800: #7F97A0;  /* dimmest: placeholders                    */

    /* ---- Coral scale — the shipped destructive red family ---- */
    --ava-coral: #ff6b6b;          /* solid destructive CTA (ku-confirm-ok) */
    --ava-coral-soft: #ff8a8a;     /* destructive text/borders (.s-del)     */
    --ava-coral-softer: #ff9a9a;   /* destructive icon buttons              */
    --ava-coral-lightest: #ffb3b3; /* destructive hover text                */
    --ava-on-coral: #2a0808;       /* text on a solid coral button          */

    /* ---- On-accent ---- */
    --ava-on-accent: #012232;      /* text/icon on a solid aqua surface     */

    /* ---- HTTP-method badges: one hue per verb, tint + text per theme ---- */
    --ava-method-get-bg:     rgba(78,216,230,0.14);
    --ava-method-get-fg:     #4ED8E6;
    --ava-method-post-bg:    rgba(63,217,160,0.14);
    --ava-method-post-fg:    #3FD9A0;
    --ava-method-put-bg:     rgba(227,180,87,0.15);
    --ava-method-put-fg:     #E3B457;
    --ava-method-patch-bg:   rgba(169,155,239,0.16);
    --ava-method-patch-fg:   #A99BEF;
    --ava-method-delete-bg:  rgba(240,138,138,0.13);
    --ava-method-delete-fg:  #F08A8A;

    /* ======================================================================
       THEMING: the light theme below swaps token VALUES only — components
       never change. `data-theme="light"` on <html> activates it; absence of
       the attribute is the dark default. The switch lives in Settings and is
       applied pre-paint by the boot script in index.html (localStorage
       'ava-theme': dark | light | system). New code MUST use tokens; see the
       ava-design-system skill for the rules and the mapping table.
       ====================================================================== */
}

/* ==========================================================================
   LIGHT THEME — same token names, light values. Chained aliases (panel,
   surfaces, chat chrome, …) follow automatically; only literal-valued
   tokens are overridden here.
   ========================================================================== */
:root[data-theme="light"] {
    color-scheme: light;

    /* ---- Surfaces (inverted ladder, blue-grey family) ---- */
    --ava-ink:         #E9F1F4;
    --ava-navy:        #F2F7F9;
    --ava-navy-deep:   #FFFFFF;
    --ava-navy-raised: #DFEDF2;
    --ava-card:        #FFFFFF;
    --ava-card-alt:    #FFFFFF;
    --ava-ink-deepest: #CFDEE4;

    /* ---- Accents (deepened for contrast on light) ---- */
    --ava-aqua:  #0BAF9F;
    --ava-cyan:  #0E7FA5;
    --ava-green: #0E9F6E;
    --ava-aqua-deep: #08897D;
    --ava-accent-deep: #0A8578;
    --ava-ok-deep: #0B8A5C;
    --ava-green-mid: #12855F;
    --ava-green-alt: #3F8F33;
    --ava-on-accent: #FFFFFF;

    /* ---- HTTP-method badges ---- */
    --ava-method-get-bg:     rgba(10,139,154,0.12);
    --ava-method-get-fg:     #0A7A88;
    --ava-method-post-bg:    rgba(16,140,95,0.13);
    --ava-method-post-fg:    #0C7A52;
    --ava-method-put-bg:     rgba(184,124,20,0.14);
    --ava-method-put-fg:     #8A5D06;
    --ava-method-patch-bg:   rgba(107,91,181,0.13);
    --ava-method-patch-fg:   #584A9B;
    --ava-method-delete-bg:  rgba(184,58,58,0.11);
    --ava-method-delete-fg:  #9E3535;

    /* ---- Danger ---- */
    --ava-danger-text:  #B0453E;
    --ava-danger-link-hover: #9C3F38;
    --ava-danger-grad-hover: #8F4640;
    --ava-danger-pale: #8F3B34;
    --ava-danger-pale-2: #96433C;
    --ava-coral: #E05252;
    --ava-coral-soft: #C24A45;
    --ava-coral-softer: #CE5A55;
    --ava-coral-lightest: #A83E38;
    --ava-on-coral: #FFFFFF;

    /* ---- Text (inverted slate ramp) ---- */
    --ava-text-1: #0B2530;
    --ava-text-2: #46626E;
    --ava-text-3: #6C8793;
    --ava-text-faint: rgba(90,110,120,0.70);
    --ava-slate-100: #0B2530;
    --ava-slate-200: #1B3540;
    --ava-slate-300: #2B4753;
    --ava-slate-400: #3A5763;
    --ava-slate-500: #46626E;
    --ava-slate-600: #5B7683;
    --ava-slate-700: #6C8793;
    --ava-slate-800: #8FA6B0;
    --ava-slate-900: #9DB1BA;
    --ava-slate-950: #A9BBC3;
    --ava-ice-text: #2E5866;
    --ava-demo-text: #8F6E1E;
    --ava-lightgray: #8FA0A8;

    /* ---- Full-screen loader (Pulse-Halo); backdrop follows --ava-navy ---- */
    --ava-loader-ring: rgba(10,139,154,0.55);
    --ava-loader-text: #0F2A36;

    /* ---- RGB triplets (every rgba(var(--ava-rgb-*),a) follows) ---- */
    --ava-rgb-slate: 70,95,108;
    --ava-rgb-slate-300: 43,71,83;
    --ava-rgb-aqua: 11,175,159;
    --ava-rgb-green: 14,159,110;
    --ava-rgb-red: 224,82,82;
    --ava-rgb-danger-text: 176,69,62;
    --ava-rgb-cyan: 14,127,165;
    --ava-rgb-text: 11,37,48;
    --ava-rgb-on-accent: 255,255,255;
    --ava-rgb-red-pale: 143,59,52;
    /* glass/hover fills flip from white-tint to slate-tint */
    --ava-rgb-white: 70,95,108;
    /* frosted dark-glass surfaces (mobile chat bubbles) flip to frosted white */
    --ava-rgb-navy-deep: 255,255,255;

    /* ---- Hairlines / selection / hover (literal tokens) ---- */
    --ava-line-soft:   rgba(70,95,108,0.14);
    --ava-line:        rgba(70,95,108,0.22);
    --ava-line-strong: rgba(70,95,108,0.32);
    --ava-select:      rgba(70,95,108,0.14);
    --ava-select-ring: rgba(70,95,108,0.24);
    --ava-hover:       rgba(70,95,108,0.07);
    --ava-accent-soft-2: rgba(70,95,108,0.10);
    --ava-glass:   rgba(70,95,108,0.04);
    --ava-glass-2: rgba(70,95,108,0.06);
    --ava-scroll-thumb-hover: rgba(70,95,108,0.42);

    /* ---- Neutral buttons ---- */
    --ava-btn-2:       #E4EDF0;
    --ava-btn-2-hover: #D8E4E8;

    /* ---- Accent tints + focus (recomputed from the light aqua) ---- */
    --ava-aqua-08: rgba(11,175,159,0.08);
    --ava-aqua-12: rgba(11,175,159,0.12);
    --ava-aqua-22: rgba(11,175,159,0.22);
    --ava-focus:   rgba(11,175,159,0.55);
    --ava-focus-r: rgba(11,175,159,0.16);

    /* ---- Shadows (softer on light) ---- */
    --shadow-card:  0 14px 32px -16px rgba(23,48,60,0.28);
    --shadow-panel: 0 18px 44px -18px rgba(23,48,60,0.30);
    --shadow-modal: 0 34px 90px rgba(23,48,60,0.32);

    /* ---- Chat chrome (literal-valued chat tokens) ---- */
    --ava-chat-glass-1: rgba(70,95,108,0.04);
    --ava-chat-glass-2: rgba(70,95,108,0.06);
    --ava-chat-glass-3: rgba(70,95,108,0.08);
    --ava-chat-msg-bot-bg: #FFFFFF;
    --ava-chat-chip-bg: rgba(70,95,108,0.08);
    --ava-chat-doc-bg: rgba(70,95,108,0.08);
    --ava-chat-scroll-thumb-hover: rgba(70,95,108,0.42);
}

/* =========================
   Global typography
   ========================= */
.ava-app {
    font-family: var(--font-sans);
    font-size: var(--ava-font-size);
    line-height: var(--ava-line);
}

.ava-app h1, .ava-app h2, .ava-app h3, .ava-app h4, .ava-app h5, .ava-app h6,
.ava-app label {
    color: var(--ava-text-1);
}

/* =========================================================
   Global button system (flat, neutral — aqua is signal only)
   ========================================================= */
.ava-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: var(--r-sm);
    font-weight: 700;
    font-size: 13px;
    background: var(--ava-btn-2);
    border: 1px solid var(--ava-line);
    color: var(--ava-text-1);
    cursor: pointer;
    white-space: nowrap;
    transition: filter var(--ava-dur-1) var(--ava-ease), background var(--ava-dur-1) var(--ava-ease), border-color var(--ava-dur-1) var(--ava-ease), color var(--ava-dur-1) var(--ava-ease), transform 50ms var(--ava-ease);
}

.ava-btn:hover { background: var(--ava-btn-2-hover); }
.ava-btn:active { transform: translateY(1px); }
.ava-btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }

.ava-btn-sm { padding: 7px 12px; border-radius: var(--r-sm); font-size: 12.5px; }
.ava-btn-xs { padding: 5px 9px; border-radius: var(--r-xs); font-size: 12px; }

/* Primary — the aqua CTA. Use sparingly (1 per view). */
.ava-btn-primary,
.ava-btn--primary {
    background: var(--ava-aqua);
    border: 1px solid var(--ava-aqua);
    color: var(--ava-navy);
    font-weight: 700;
}
.ava-btn-primary:hover,
.ava-btn--primary:hover { background: var(--ava-aqua); filter: brightness(1.06); }

/* Secondary — solid neutral (the default). */
.ava-btn--secondary {
    background: var(--ava-btn-2);
    border: 1px solid var(--ava-line);
    color: var(--ava-text-1);
    font-weight: 600;
}
.ava-btn--secondary:hover { background: var(--ava-btn-2-hover); }

/* Ghost — quiet inline action. */
.ava-btn-ghost,
.ava-btn--ghost {
    background: transparent;
    border: 1px solid var(--ava-line-strong);
    color: var(--ava-text-2);
    font-weight: 600;
}
.ava-btn-ghost:hover,
.ava-btn--ghost:hover { background: var(--ava-hover); color: var(--ava-text-1); }

/* Positive */
.ava-btn-ok {
    background: var(--ava-btn-2);
    border: 1px solid var(--ava-line);
    color: var(--ava-text-1);
}
.ava-btn-ok:hover { background: var(--ava-btn-2-hover); }

/* Danger — solid muted brick red. */
.ava-btn-danger,
.ava-btn--danger,
.ava-btn-delete {
    background: var(--ava-danger-solid);
    border: 1px solid var(--ava-danger-solid);
    color: #ffffff;
    box-shadow: none;
}
.ava-btn-danger:hover,
.ava-btn--danger:hover,
.ava-btn.ava-btn-delete:hover {
    background: var(--ava-danger-solid);
    border-color: var(--ava-danger-solid);
    box-shadow: none;
    filter: brightness(1.08);
    transform: none;
}
.ava-btn.ava-btn-delete:active { transform: translateY(1px); filter: brightness(0.98); }

.ava-btn-square {
    display: inline-grid;
    place-items: center;
    padding: 0 !important;
    width: 32px;
    height: 32px;
}
.ava-btn-square.ava-btn-sm { width: 28px; height: 28px; }
.ava-btn-square.ava-btn-xs { width: 24px; height: 24px; }

/* Close "X" — solid muted-red icon button. */
.ava-close {
    display: grid; place-items: center;
    width: 30px; height: 30px; flex: 0 0 auto;
    border: none; border-radius: var(--r-xs);
    background: var(--ava-danger-solid); color: #fff;
    font-size: 16px; line-height: 1; cursor: pointer;
    transition: filter var(--ava-dur-1);
}
.ava-close:hover { filter: brightness(1.08); }
.ava-close--round { border-radius: 50%; width: 34px; height: 34px; }

/* =========================================================
   Icon buttons
   ========================================================= */
.ava-icon-btn {
    display: inline-grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: var(--r-sm);
    padding: 0;
    background: var(--ava-btn-2);
    border: 1px solid var(--ava-line);
    color: var(--ava-text-1);
    font-weight: 700;
    cursor: pointer;
    transition: background var(--ava-dur-1) var(--ava-ease), border-color var(--ava-dur-1) var(--ava-ease), filter var(--ava-dur-1) var(--ava-ease);
}
.ava-icon-btn:hover { background: var(--ava-btn-2-hover); }
.ava-icon-btn--sm { width: 28px; height: 28px; }
.ava-icon-btn--xs { width: 24px; height: 24px; }
.ava-icon-btn.is-ok { background: var(--ava-btn-2); border-color: var(--ava-line); }
.ava-icon-btn.is-ok:hover { background: var(--ava-btn-2-hover); }
.ava-icon-btn.is-bad { background: rgba(156,86,81,0.16); border-color: rgba(156,86,81,0.42); color: var(--ava-danger-text); }
.ava-icon-btn.is-bad:hover { background: rgba(156,86,81,0.24); }

/* =========================================================
   Toggle switch — ON = aqua. Existing markup is a
   <label class="ava-switch"><input type=checkbox>… wrapper.
   ========================================================= */
.ava-switch {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 8px 10px;
    background: transparent;
    border-radius: var(--r-md);
    border: 1px solid var(--ava-line-soft);
    cursor: pointer;
    user-select: none;
}
.ava-switch input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    margin: 0;
    width: 42px;
    height: 24px;
    border-radius: var(--r-pill);
    border: none;
    background: rgba(159,182,190,0.22);
    position: relative;
    cursor: pointer;
    transition: background var(--ava-dur-1) var(--ava-ease);
    outline: none;
}
.ava-switch input[type="checkbox"]::before {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    transition: transform var(--ava-dur-1) var(--ava-ease);
}
.ava-switch input[type="checkbox"]:checked { background: var(--ava-aqua); border-color: var(--ava-aqua); }
.ava-switch input[type="checkbox"]:checked::before { transform: translateX(18px); background: #fff; }
.ava-switch input[type="checkbox"]:focus-visible { box-shadow: var(--ava-focus-ring); }
.ava-switch span { color: var(--ava-text-1); font-weight: 600; font-size: 14px; }
.ava-switch input[type="checkbox"]:disabled { opacity: .5; cursor: not-allowed; }
.ava-switch:has(input[type="checkbox"]:disabled) { opacity: .6; cursor: not-allowed; }

/* =========================
   Global interaction states
   ========================= */
:where(button, .btn, a, input, textarea, select) {
    transition: transform var(--ava-dur-1) var(--ava-ease), box-shadow var(--ava-dur-1) var(--ava-ease), border-color var(--ava-dur-1) var(--ava-ease), filter var(--ava-dur-1) var(--ava-ease), background-color var(--ava-dur-1) var(--ava-ease);
}
:where(button, .btn, a, input, textarea, select):focus-visible {
    outline: none;
    box-shadow: var(--ava-focus-ring);
    border-color: var(--ava-focus);
}
:where(button, .btn):active { transform: translateY(0.5px); }
:where(button, .btn, input, textarea, select)[disabled],
:where(button, .btn).disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

@media (prefers-reduced-motion: reduce) {
    :where(button, .btn, a, input, textarea, select) { transition: none; }
}