/* ============================================================
   Leona AI — Design Tokens
   Apple Liquid Glass · Pure Monochrome · Carbon Black
   --------------------------------------------------------
   Phase C1: token foundations + backward-compat aliases.
   Glass utilities (.glass-1/2/3), SVG refraction filters,
   body grain texture and motion utilities arrive in C2.
   ============================================================ */


/* ---------- Layer 1 — Raw Ink Scale -----------------------
   Carbon-based 11-stop neutral scale. Single source of truth
   for every neutral colour. Semantic tokens reference these.
   ---------------------------------------------------------- */
:root {
    --ink-0:   #000000;
    --ink-5:   #0a0a0c;   /* Carbon black — base surface */
    --ink-10:  #131316;   /* Elevated surface */
    --ink-15:  #1b1b1f;   /* Raised surface */
    --ink-20:  #232328;   /* Card surface */
    --ink-30:  #33333a;   /* Stroke strong / divider */
    --ink-50:  #6e6e76;   /* Muted text */
    --ink-70:  #a1a1aa;   /* Secondary text */
    --ink-85:  #d4d4d8;   /* Body text */
    --ink-92:  #e8e8ea;   /* Primary text */
    --ink-100: #ffffff;   /* Highlight / accent */
}


/* ---------- Layer 2 — Semantic Tokens ---------------------
   Every CSS rule should bind to these, not raw ink values.
   ---------------------------------------------------------- */
:root {
    /* Surfaces (opaque) */
    --surface-base:     var(--ink-5);
    --surface-elevated: var(--ink-10);
    --surface-raised:   var(--ink-15);
    --surface-card:     var(--ink-20);
    --surface-overlay:  rgba(0, 0, 0, 0.55);

    /* Text */
    --text-1: var(--ink-92);   /* primary */
    --text-2: var(--ink-70);   /* secondary */
    --text-3: var(--ink-50);   /* muted */

    /* Strokes — hairline → focus */
    --stroke-hairline: rgba(255, 255, 255, 0.06);
    --stroke-subtle:   rgba(255, 255, 255, 0.10);
    --stroke-strong:   rgba(255, 255, 255, 0.18);
    --stroke-focus:    rgba(255, 255, 255, 0.60);

    /* Liquid Glass — Tier 1 (Macro: fullscreen modal/login backdrop) */
    --glass-1-bg:        rgba(15, 15, 18, 0.55);
    --glass-1-border:    rgba(255, 255, 255, 0.05);
    --glass-1-blur:      36px;
    --glass-1-saturate:  1.8;
    --glass-1-tint-top:  rgba(28, 28, 32, 0.45);
    --glass-1-tint-bot:  rgba(20, 20, 24, 0.60);
    --glass-1-refract:   url(#liquid-refraction-1);

    /* Liquid Glass — Tier 2 (Panel: sidebar, header, chat input, stat-card) */
    --glass-2-bg:        rgba(20, 20, 24, 0.66);
    --glass-2-border:    rgba(255, 255, 255, 0.08);
    --glass-2-blur:      22px;
    --glass-2-saturate:  1.5;
    --glass-2-tint-top:  rgba(28, 28, 32, 0.55);
    --glass-2-tint-bot:  rgba(20, 20, 24, 0.72);
    --glass-2-refract:   url(#liquid-refraction-2);

    /* Liquid Glass — Tier 3 (Element: dropdown, tooltip, message bubble) */
    --glass-3-bg:        rgba(28, 28, 32, 0.78);
    --glass-3-border:    rgba(255, 255, 255, 0.10);
    --glass-3-blur:      12px;
    --glass-3-saturate:  1.4;
    --glass-3-tint-top:  rgba(36, 36, 42, 0.65);
    --glass-3-tint-bot:  rgba(28, 28, 32, 0.82);
    --glass-3-refract:   url(#liquid-refraction-3);

    /* Shadows — Apple long & soft (low alpha, large spread) */
    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.40);
    --shadow-2: 0 8px 24px rgba(0, 0, 0, 0.35);
    --shadow-3: 0 24px 64px rgba(0, 0, 0, 0.45);
    --shadow-4: 0 40px 120px rgba(0, 0, 0, 0.55);

    /* Shadow primitives for liquid glass composition */
    --shadow-contact: 0 1px 1px rgba(0, 0, 0, 0.20);
    --shadow-lift:    0 8px 24px rgba(0, 0, 0, 0.25);
    --shadow-ambient: 0 32px 64px -16px rgba(0, 0, 0, 0.40);

    /* Inset (depth) — composed inside .glass-N utilities */
    --inset-top-glow:    inset 0 1px 0 rgba(255, 255, 255, 0.15);
    --inset-bot-shadow:  inset 0 -1px 0 rgba(0, 0, 0, 0.35);
    --inset-left-rim:    inset 1px 0 0 rgba(255, 255, 255, 0.06);
    --inset-right-rim:   inset -1px 0 0 rgba(0, 0, 0, 0.18);
    --inset-top-bloom:   inset 0 8px 24px -8px rgba(255, 255, 255, 0.08);
    --inset-bot-depth:   inset 0 -12px 32px -12px rgba(0, 0, 0, 0.40);

    /* Radius — squircle scale (continuous-corner feel) */
    --radius-xs:   8px;
    --radius-sm:   14px;
    --radius-md:   22px;
    --radius-lg:   32px;
    --radius-pill: 999px;

    /* Motion — duration */
    --motion-fast: 160ms;
    --motion-base: 240ms;
    --motion-slow: 420ms;

    /* Motion — easing */
    --ease-spring: cubic-bezier(0.32, 0.72, 0, 1);   /* iOS standard */
    --ease-snappy: cubic-bezier(0.20, 0.90, 0.10, 1);
    --ease-smooth: cubic-bezier(0.40, 0.00, 0.20, 1);

    /* Accent — pure monochrome (no chroma at all) */
    --accent:    var(--ink-100);
    --accent-on: var(--ink-0);
    --ring:      var(--stroke-focus);

    /* Semantic destructive (kept as red — destructive action hue is functional) */
    --destructive:      #ef4444;
    --destructive-glow: rgba(239, 68, 68, 0.25);

    /* Centralized z-index scale preventing layering occlusion */
    --z-base:       0;
    --z-social:     10000;
    --z-modal:      10010;
    --z-overlay:    10020;
    --z-code:       10030;
    --z-logout:     10040;
    --z-dialog:     10050;
    --z-toast:      10060;

    /* GPU acceleration hardware triggers */
    --gpu-will-change: transform, opacity, backdrop-filter;
    --gpu-transform: translate3d(0, 0, 0);
}


/* ---------- Layer 3 — Backward-Compat Aliases -------------
   Keep existing main.css and admin.css token consumers
   working without renaming during phases C2–C9. The legacy
   :root blocks in main.css and admin.css still override
   these aliases until C10, so this layer is dormant in C1
   (visual diff = zero). After C10 :root removal, every
   legacy var() call falls through to these aliases.
   ---------------------------------------------------------- */
:root {
    /* main.css legacy */
    --bg-primary:    var(--surface-base);
    --bg-secondary:  var(--surface-elevated);
    --bg-tertiary:   var(--surface-raised);
    --text-primary:   var(--text-1);
    --text-secondary: var(--text-2);
    --border-color:   var(--stroke-subtle);
    --hover-bg:       rgba(255, 255, 255, 0.06);
    --accent-color:   var(--accent);          /* purple → white */

    /* admin.css legacy */
    --bg-body:        var(--surface-base);
    --bg-gradient:    none;                   /* radial purple → no image (body grain owns texture) */
    --glass-bg:       rgba(255, 255, 255, 0.03);  /* preserve admin's value */
    --glass-border:   rgba(255, 255, 255, 0.08);
    --glass-hover:    rgba(255, 255, 255, 0.07);
    --glass-active:   rgba(255, 255, 255, 0.10);  /* purple alpha → white */
    --accent-glow:    rgba(255, 255, 255, 0.18);  /* purple glow → white */
    --text-muted:     var(--text-3);
    --success:        var(--ink-92);          /* status by typography, not hue */
    --success-glow:   rgba(255, 255, 255, 0.18);
    --danger:         var(--destructive);
    --danger-glow:    var(--destructive-glow);
    --warning:        var(--ink-85);
    /* NOTE: admin.css defines --radius-lg: 24, --radius-md: 16, --radius-sm: 10.
       Our semantic scale is 32 / 22 / 14. We do NOT alias these here; admin.css's
       own :root keeps its values until C10. After C10 removal the semantic scale
       takes over (24→32, 16→22, 10→14) — a small Apple-tier corner increase. */
}


/* ============================================================
   Phase C2 — Liquid Glass Utility Surfaces
   --------------------------------------------------------
   Eight-layer composition (per §1.5 of plan):
     1. Refraction       (SVG feDisplacementMap via backdrop-filter url())
     2. Backdrop blur    (blur + saturate + brightness)
     3. Tint             (linear gradient, top→bottom)
     4. Specular         (::before, top-left highlight, blend overlay)
     5. Inner shadow     (six inset box-shadows for depth/rim)
     6. Border           (1px hairline)
     7. Outer shadow     (contact + lift + ambient)
     8. Edge bloom       (T1/T2 only, subtle outer halo)
   ============================================================ */

/* SVG refraction filter container — never paints visually */
.liquid-filters {
    position: absolute;
    width: 0;
    height: 0;
    pointer-events: none;
    visibility: hidden;
    overflow: hidden;
}

/* ---------- Body grain texture ----------
   Apply via .app-grain class on body or any full-screen container.
   Layered intentionally — opt-in to avoid clashing with existing
   page backgrounds during phased migration. C3 onwards adds it. */
.app-grain {
    position: relative;
}
.app-grain::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.04 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
    background-repeat: repeat;
    mix-blend-mode: overlay;
    opacity: 1;
}

/* ---------- Liquid Glass Utilities ----------
   Shared structural rules: positioning, isolation, overflow.
   Each tier adds tier-specific tint, blur, border, shadow stacks. */
.glass-1,
.glass-2,
.glass-3 {
    position: relative;
    isolation: isolate;
    /* overflow: hidden removed — child popovers/tooltips need to escape;
       use overflow-clip-margin on consumers when needed */
}

/* Specular highlight — top-left bright crescent (Layer 4) */
.glass-1::before,
.glass-2::before,
.glass-3::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    z-index: 1;
    background: linear-gradient(135deg,
        rgba(255, 255, 255, 0.18) 0%,
        rgba(255, 255, 255, 0.05) 40%,
        transparent 60%);
    mix-blend-mode: overlay;
    opacity: 0.85;
}
.glass-2::before { opacity: 0.72; }
.glass-3::before {
    opacity: 0.55;
    background: linear-gradient(135deg,
        rgba(255, 255, 255, 0.12) 0%,
        rgba(255, 255, 255, 0.03) 40%,
        transparent 55%);
}

/* Tier 1 — Macro (login backdrop, fullscreen modal overlay) */
.glass-1 {
    background:
        linear-gradient(180deg, var(--glass-1-tint-top) 0%, var(--glass-1-tint-bot) 100%),
        var(--glass-1-bg);
    backdrop-filter:
        blur(var(--glass-1-blur))
        saturate(var(--glass-1-saturate))
        brightness(1.05)
        var(--glass-1-refract);
    -webkit-backdrop-filter:
        blur(var(--glass-1-blur))
        saturate(var(--glass-1-saturate))
        brightness(1.05);
    border: 1px solid var(--glass-1-border);
    border-radius: var(--radius-lg);
    box-shadow:
        var(--inset-top-glow),
        var(--inset-bot-shadow),
        var(--inset-left-rim),
        var(--inset-right-rim),
        var(--inset-top-bloom),
        var(--inset-bot-depth),
        var(--shadow-contact),
        var(--shadow-lift),
        var(--shadow-ambient),
        0 0 0 1px rgba(255, 255, 255, 0.04),
        0 0 24px rgba(255, 255, 255, 0.03);
}

/* Tier 2 — Panel (sidebar, header, chat input, stat-card, settings) */
.glass-2 {
    background:
        linear-gradient(180deg, var(--glass-2-tint-top) 0%, var(--glass-2-tint-bot) 100%),
        var(--glass-2-bg);
    backdrop-filter:
        blur(var(--glass-2-blur))
        saturate(var(--glass-2-saturate))
        brightness(1.04)
        var(--glass-2-refract);
    -webkit-backdrop-filter:
        blur(var(--glass-2-blur))
        saturate(var(--glass-2-saturate))
        brightness(1.04);
    border: 1px solid var(--glass-2-border);
    border-radius: var(--radius-md);
    box-shadow:
        var(--inset-top-glow),
        var(--inset-bot-shadow),
        var(--inset-left-rim),
        var(--inset-right-rim),
        var(--inset-top-bloom),
        var(--inset-bot-depth),
        var(--shadow-contact),
        var(--shadow-lift),
        0 0 0 1px rgba(255, 255, 255, 0.03);
}

/* Tier 3 — Element (dropdown, tooltip, button hover, message bubble) */
.glass-3 {
    background:
        linear-gradient(180deg, var(--glass-3-tint-top) 0%, var(--glass-3-tint-bot) 100%),
        var(--glass-3-bg);
    backdrop-filter:
        blur(var(--glass-3-blur))
        saturate(var(--glass-3-saturate))
        brightness(1.03)
        var(--glass-3-refract);
    -webkit-backdrop-filter:
        blur(var(--glass-3-blur))
        saturate(var(--glass-3-saturate))
        brightness(1.03);
    border: 1px solid var(--glass-3-border);
    border-radius: var(--radius-sm);
    box-shadow:
        var(--inset-top-glow),
        var(--inset-bot-shadow),
        var(--inset-top-bloom),
        var(--shadow-contact),
        var(--shadow-lift);
}

/* Liquid hover morph — capsule "swell" feel */
.glass-1.is-interactive:hover,
.glass-2.is-interactive:hover,
.glass-3.is-interactive:hover {
    transform: translateY(-1px) scale(1.005);
    filter: brightness(1.05);
}
.glass-1.is-interactive,
.glass-2.is-interactive,
.glass-3.is-interactive {
    transition:
        transform var(--motion-base) var(--ease-spring),
        filter var(--motion-base) var(--ease-spring),
        border-radius var(--motion-base) var(--ease-spring);
    cursor: pointer;
}

/* Liquid press — water-droplet compression */
.glass-1.is-interactive:active,
.glass-2.is-interactive:active,
.glass-3.is-interactive:active {
    transform: scale(0.985);
    filter: brightness(0.96);
    transition:
        transform 80ms var(--ease-snappy),
        filter 80ms var(--ease-snappy);
}


/* ---------- Universal tactile press utility ----------
   For buttons / clickable cards that don't carry .glass-N. */
.touchable {
    transition:
        transform var(--motion-fast) var(--ease-spring),
        filter var(--motion-fast) var(--ease-spring),
        box-shadow var(--motion-fast) var(--ease-spring);
}
.touchable:hover {
    transform: translateY(-1px);
    filter: brightness(1.04);
}
.touchable:active {
    transform: translateY(0) scale(0.98);
    filter: brightness(0.94);
    transition:
        transform 80ms var(--ease-snappy),
        filter 80ms var(--ease-snappy);
}


/* ============================================================
   Performance & accessibility fallbacks
   ============================================================ */

/* Reduced motion — drop refraction, halve blur, disable morph + grain */
@media (prefers-reduced-motion: reduce) {
    .glass-1,
    .glass-2,
    .glass-3 {
        backdrop-filter: blur(8px) saturate(1.2);
        -webkit-backdrop-filter: blur(8px) saturate(1.2);
    }
    .glass-1.is-interactive:hover,
    .glass-2.is-interactive:hover,
    .glass-3.is-interactive:hover,
    .glass-1.is-interactive:active,
    .glass-2.is-interactive:active,
    .glass-3.is-interactive:active,
    .touchable:hover,
    .touchable:active {
        transform: none;
        filter: none;
    }
    .app-grain::before {
        display: none;
    }
}

/* Mobile — drop GPU-heavy refraction, keep blur + saturate */
@media (max-width: 768px) {
    .glass-1 {
        backdrop-filter: blur(var(--glass-1-blur)) saturate(var(--glass-1-saturate)) brightness(1.05);
        -webkit-backdrop-filter: blur(var(--glass-1-blur)) saturate(var(--glass-1-saturate)) brightness(1.05);
    }
    .glass-2 {
        backdrop-filter: blur(var(--glass-2-blur)) saturate(var(--glass-2-saturate)) brightness(1.04);
        -webkit-backdrop-filter: blur(var(--glass-2-blur)) saturate(var(--glass-2-saturate)) brightness(1.04);
    }
    .glass-3 {
        backdrop-filter: blur(var(--glass-3-blur)) saturate(var(--glass-3-saturate)) brightness(1.03);
        -webkit-backdrop-filter: blur(var(--glass-3-blur)) saturate(var(--glass-3-saturate)) brightness(1.03);
    }
}

/* No backdrop-filter support — solid surface fallback */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .glass-1,
    .glass-2,
    .glass-3 {
        background: var(--surface-elevated);
    }
    .glass-1::before,
    .glass-2::before,
    .glass-3::before {
        display: none;
    }
}

/* ===== CUSTOM SCROLLBAR (LIQUID GLASS STYLE) ===== */
*, html, body {
    scrollbar-width: thin !important;
    scrollbar-color: rgba(255, 255, 255, 0.12) transparent !important;
}

::-webkit-scrollbar {
    width: 8px !important;
    height: 8px !important;
}

::-webkit-scrollbar-track {
    background: transparent !important;
    border: none !important;
}

::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.08) !important;
    border-radius: 99px !important;
    border: 2px solid transparent !important;
    background-clip: padding-box !important;
    transition: background 0.3s ease !important;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.18) !important;
    background-clip: padding-box !important;
}

::-webkit-scrollbar-thumb:active {
    background: rgba(255, 255, 255, 0.28) !important;
    background-clip: padding-box !important;
}

::-webkit-scrollbar-button {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

::-webkit-scrollbar-corner {
    background: transparent !important;
}