/* =============================================================================
   GLASS DESIGN TOKENS

   Unified glass system. All tiers share the same blur.
   Each tier has: background, blur, border, shadow, glow.

   TIERS:
   - Content (68%): Cards, panels, reading surfaces
   - Chrome  (60%): Structural UI — headers, footers, sidebars, navigation
   - Input   (74%): Interactive — query bars, form fields, text entry
   - Overlay (84% light / 66% dark): Temporary elevated — modals, dropdowns, menus, toasts
   ============================================================================= */

:root {
  /* ---------------------------------------------------------------------------
     SHARED BLUR — Single backdrop-filter for all glass surfaces.
     One value to tune globally.
     --------------------------------------------------------------------------- */
  --glass-blur: blur(12px) saturate(150%);

  /* ---------------------------------------------------------------------------
     CONTENT TIER (68% opacity)
     Reading surfaces: cards, panels, content areas, day views.
     Deeper blur (24px) for soft, diffused backgrounds behind readable content.
     --------------------------------------------------------------------------- */
  --glass-content-bg: rgba(255, 255, 255, 0.68);
  --glass-content-blur: blur(24px) saturate(150%);
  --glass-content-border: 1px solid rgba(0, 0, 0, 0.08);
  --glass-content-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  --glass-content-glow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    inset 0 0 0 1px rgba(255, 255, 255, 0.12);

  /* Hover state */
  --glass-content-bg-hover: rgba(255, 255, 255, 0.76);
  --glass-content-border-hover: 1px solid rgba(0, 0, 0, 0.12);

  /* ---------------------------------------------------------------------------
     CHROME TIER (60% opacity, subtle blur)
     Structural UI: headers, footers, sidebars, navigation, FABs
     --------------------------------------------------------------------------- */
  --glass-chrome-bg: rgba(255, 255, 255, 0.60);
  --glass-chrome-blur: var(--glass-blur);
  --glass-chrome-border: 1px solid rgba(255, 255, 255, 0.25);
  --glass-chrome-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  --glass-chrome-glow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    inset 0 0 0 1px rgba(255, 255, 255, 0.15);

  /* Hover state */
  --glass-chrome-bg-hover: rgba(255, 255, 255, 0.68);
  --glass-chrome-border-hover: 1px solid rgba(255, 255, 255, 0.35);

  /* ---------------------------------------------------------------------------
     INPUT TIER (74% opacity, subtle blur)
     Interactive surfaces: query bars, form fields, text entry
     --------------------------------------------------------------------------- */
  --glass-input-bg: rgba(255, 255, 255, 0.74);
  --glass-input-blur: var(--glass-blur);
  --glass-input-border: 1px solid rgba(0, 0, 0, 0.08);
  --glass-input-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  --glass-input-glow:
    inset 0 1px 0 rgba(255, 255, 255, 0.8),
    inset 0 0 0 1px rgba(255, 255, 255, 0.15);

  /* Hover/focus state */
  --glass-input-bg-hover: rgba(255, 255, 255, 0.88);
  --glass-input-border-hover: 1px solid rgba(0, 0, 0, 0.12);

  /* ---------------------------------------------------------------------------
     OVERLAY TIER (84% opacity, subtle blur)
     Temporary elevated: modals, dropdowns, menus, popovers, toasts
     --------------------------------------------------------------------------- */
  --glass-overlay-bg: rgba(255, 255, 255, 0.84);
  --glass-overlay-blur: var(--glass-blur);
  --glass-overlay-border: 1px solid rgba(0, 0, 0, 0.08);
  --glass-overlay-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.06);
  --glass-overlay-glow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    inset 0 0 0 1px rgba(255, 255, 255, 0.15);

  /* Hover state */
  --glass-overlay-bg-hover: rgba(255, 255, 255, 0.90);
  --glass-overlay-border-hover: 1px solid rgba(0, 0, 0, 0.12);

  /* ---------------------------------------------------------------------------
     TINTED GLASS — Subtle color-washed content-tier variants.
     Same glass treatment as content tier, just a hint of color in the fill.
     Use via .card--tint-warm, .card--tint-cool, etc.
     --------------------------------------------------------------------------- */
  --glass-tint-warm-bg: rgba(245, 232, 215, 0.62);
  --glass-tint-warm-bg-hover: rgba(245, 232, 215, 0.72);
  --glass-tint-warm-border: 1px solid rgba(210, 180, 140, 0.14);

  --glass-tint-cool-bg: rgba(215, 230, 248, 0.62);
  --glass-tint-cool-bg-hover: rgba(215, 230, 248, 0.72);
  --glass-tint-cool-border: 1px solid rgba(140, 175, 220, 0.14);

  --glass-tint-sage-bg: rgba(218, 238, 222, 0.62);
  --glass-tint-sage-bg-hover: rgba(218, 238, 222, 0.72);
  --glass-tint-sage-border: 1px solid rgba(140, 195, 150, 0.14);

  --glass-tint-rose-bg: rgba(245, 220, 228, 0.62);
  --glass-tint-rose-bg-hover: rgba(245, 220, 228, 0.72);
  --glass-tint-rose-border: 1px solid rgba(220, 150, 170, 0.14);

  /* ---------------------------------------------------------------------------
     TINT MIX LEVELS — Standard percentages for color-mix with tint-solid.
     Use: color-mix(in srgb, var(--card-tint) var(--tint-mix-*), transparent)
       soft (12%) → backgrounds, icon fills, badges
       mid  (30%) → borders, hover states
       bold (65%) → active borders, opaque fills
     --------------------------------------------------------------------------- */
  --tint-mix-soft: 12%;
  --tint-mix-mid: 30%;
  --tint-mix-bold: 65%;

  /* ---------------------------------------------------------------------------
     ICON TINT PALETTE — Distinct color per feature/section.
     Each tint has two tokens:
       *-solid  → opaque fill for icon circles (white foreground)
       *-fg     → foreground accent on light/glass surfaces (icon color, borders)
     --------------------------------------------------------------------------- */
  --tint-slate-solid: rgb(100, 116, 139);
  --tint-slate-fg: rgb(71, 85, 105);

  --tint-blue-solid: rgb(59, 130, 246);
  --tint-blue-fg: rgb(37, 99, 235);
  --tint-blue-wash: rgb(219, 234, 254);
  --tint-blue-mid: rgb(147, 197, 253);

  --tint-violet-solid: rgb(139, 92, 246);
  --tint-violet-fg: rgb(109, 40, 217);
  --tint-violet-wash: rgb(237, 233, 254);
  --tint-violet-mid: rgb(196, 181, 253);

  --tint-sky-solid: rgb(14, 165, 233);
  --tint-sky-fg: rgb(2, 132, 199);
  --tint-sky-wash: rgb(224, 242, 254);
  --tint-sky-mid: rgb(125, 211, 252);

  --tint-rose-solid: rgb(244, 63, 94);
  --tint-rose-fg: rgb(225, 29, 72);

  --tint-indigo-solid: rgb(99, 102, 241);
  --tint-indigo-fg: rgb(79, 70, 229);

  --tint-emerald-solid: rgb(16, 185, 129);
  --tint-emerald-fg: rgb(5, 150, 105);
  --tint-emerald-wash: rgb(209, 250, 229);
  --tint-emerald-mid: rgb(110, 231, 183);

  --tint-amber-solid: rgb(217, 119, 6);
  --tint-amber-fg: rgb(180, 83, 9);
  --tint-amber-wash: rgb(254, 243, 199);
  --tint-amber-mid: rgb(252, 211, 77);

  --tint-orange-solid: rgb(249, 115, 22);
  --tint-orange-fg: rgb(234, 88, 12);

  --tint-teal-solid: rgb(20, 184, 166);
  --tint-teal-fg: rgb(13, 148, 136);

  --tint-purple-solid: rgb(168, 85, 247);
  --tint-purple-fg: rgb(147, 51, 234);

  --tint-cyan-solid: rgb(6, 182, 212);
  --tint-cyan-fg: rgb(8, 145, 178);

  --tint-red-solid: rgb(220, 38, 38);
  --tint-red-fg: rgb(185, 28, 28);

  /* Soft pastel backgrounds for tinted chips / badges. Pair each `-bg` with
     its `-fg` for foreground colour — the chip stays legible because the bg
     stays in the 92–95% lightness band. Replaces the broken fallback to
     `-solid` which produced same-saturation orange-on-orange labels. */
  --tint-slate-bg: rgb(241, 245, 249);
  --tint-blue-bg: rgb(219, 234, 254);
  --tint-violet-bg: rgb(237, 233, 254);
  --tint-sky-bg: rgb(224, 242, 254);
  --tint-rose-bg: rgb(255, 228, 230);
  --tint-indigo-bg: rgb(224, 231, 255);
  --tint-emerald-bg: rgb(209, 250, 229);
  --tint-amber-bg: rgb(254, 243, 199);
  --tint-orange-bg: rgb(255, 237, 213);
  --tint-teal-bg: rgb(204, 251, 241);
  --tint-purple-bg: rgb(243, 232, 255);
  --tint-cyan-bg: rgb(207, 250, 254);
  --tint-red-bg: rgb(254, 226, 226);

  --tint-green-solid: rgb(34, 197, 94);
  --tint-green-fg: rgb(22, 163, 74);

  /* ---------------------------------------------------------------------------
     INNER FILLS — Semi-transparent fills for items inside frost/glass surfaces.
     NO backdrop-filter. Three patterns:
     - Inset:  Recessed grouping (subtle dark tint)
     - Raised: Elevated interactive surface (light fill + shadow)
     - Pill:   Compact badge/chip (light fill, full-radius)
     --------------------------------------------------------------------------- */
  --glass-inner-inset-bg: rgba(0, 0, 0, 0.03);
  --glass-inner-inset-bg-hover: rgba(0, 0, 0, 0.05);
  --glass-inner-inset-border: 1px solid rgba(0, 0, 0, 0.04);

  --glass-inner-raised-bg: rgba(255, 255, 255, 0.55);
  --glass-inner-raised-bg-hover: rgba(255, 255, 255, 0.70);
  --glass-inner-raised-border: 1px solid rgba(0, 0, 0, 0.06);
  --glass-inner-raised-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);

  --glass-inner-pill-bg: rgba(255, 255, 255, 0.55);
  --glass-inner-pill-bg-hover: rgba(255, 255, 255, 0.70);
  --glass-inner-pill-border: 1px solid rgba(0, 0, 0, 0.06);

  --glass-field-bg: rgba(255, 255, 255, 0.55);
  --glass-field-border-hover: rgba(255, 255, 255, 0.20);

  /* Canvas card surface fills — used by card--bg-semi / card--bg-solid on paper.
     Tintable via --card-tint (see canvas-paper.css). */
  --semi-bg: rgba(255, 255, 255, 0.38);
  --semi-bg-hover: rgba(255, 255, 255, 0.48);
  --solid-bg: rgba(255, 255, 255, 0.72);
  --solid-bg-hover: rgba(255, 255, 255, 0.80);

  /* Overlay backdrop — modal/overlay dimmers */
  --overlay-backdrop: rgba(0, 0, 0, 0.25);
}

/* =============================================================================
   DARK THEME OVERRIDES
   ============================================================================= */

.theme-dark {
  /* Content Tier - Dark */
  --glass-content-bg: rgba(20, 20, 25, 0.70);
  --glass-content-border: 1px solid rgba(255, 255, 255, 0.08);
  --glass-content-shadow: 0 1px 3px rgba(0, 0, 0, 0.20);
  --glass-content-glow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  --glass-content-bg-hover: rgba(20, 20, 25, 0.78);
  --glass-content-border-hover: 1px solid rgba(255, 255, 255, 0.12);

  /* Chrome Tier - Dark */
  --glass-chrome-bg: rgba(30, 30, 35, 0.60);
  --glass-chrome-border: 1px solid rgba(255, 255, 255, 0.12);
  --glass-chrome-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  --glass-chrome-glow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  --glass-chrome-bg-hover: rgba(30, 30, 35, 0.68);
  --glass-chrome-border-hover: 1px solid rgba(255, 255, 255, 0.20);

  /* Input Tier - Dark */
  --glass-input-bg: rgba(20, 20, 25, 0.74);
  --glass-input-border: 1px solid rgba(255, 255, 255, 0.10);
  --glass-input-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
  --glass-input-glow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  --glass-input-bg-hover: rgba(20, 20, 25, 0.82);
  --glass-input-border-hover: 1px solid rgba(255, 255, 255, 0.15);

  /* Overlay Tier - Dark */
  --glass-overlay-bg: rgba(30, 30, 35, 0.66);
  --glass-overlay-border: 1px solid rgba(255, 255, 255, 0.15);
  --glass-overlay-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), 0 2px 8px rgba(0, 0, 0, 0.2);
  --glass-overlay-glow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  --glass-overlay-bg-hover: rgba(30, 30, 35, 0.74);
  --glass-overlay-border-hover: 1px solid rgba(255, 255, 255, 0.20);

  /* Tinted Frost - Dark */
  --glass-tint-warm-bg: rgba(40, 32, 20, 0.62);
  --glass-tint-warm-bg-hover: rgba(40, 32, 20, 0.72);
  --glass-tint-warm-border: 1px solid rgba(180, 140, 80, 0.10);

  --glass-tint-cool-bg: rgba(20, 28, 42, 0.62);
  --glass-tint-cool-bg-hover: rgba(20, 28, 42, 0.72);
  --glass-tint-cool-border: 1px solid rgba(80, 130, 200, 0.10);

  --glass-tint-sage-bg: rgba(22, 35, 25, 0.62);
  --glass-tint-sage-bg-hover: rgba(22, 35, 25, 0.72);
  --glass-tint-sage-border: 1px solid rgba(80, 160, 100, 0.10);

  --glass-tint-rose-bg: rgba(40, 20, 28, 0.62);
  --glass-tint-rose-bg-hover: rgba(40, 20, 28, 0.72);
  --glass-tint-rose-border: 1px solid rgba(200, 100, 130, 0.10);

  /* Icon tint palette - Dark (slightly desaturated/lightened for dark bg) */
  --tint-slate-solid: rgb(120, 135, 155);
  --tint-slate-fg: rgb(148, 163, 184);

  --tint-blue-solid: rgb(80, 140, 240);
  --tint-blue-fg: rgb(96, 165, 250);
  --tint-blue-wash: rgb(23, 37, 64);
  --tint-blue-mid: rgb(60, 110, 200);

  --tint-violet-solid: rgb(145, 105, 240);
  --tint-violet-fg: rgb(167, 139, 250);
  --tint-violet-wash: rgb(35, 25, 60);
  --tint-violet-mid: rgb(120, 90, 210);

  --tint-sky-solid: rgb(40, 170, 230);
  --tint-sky-fg: rgb(56, 189, 248);
  --tint-sky-wash: rgb(15, 40, 60);
  --tint-sky-mid: rgb(50, 135, 200);

  --tint-rose-solid: rgb(240, 80, 105);
  --tint-rose-fg: rgb(251, 113, 133);

  --tint-indigo-solid: rgb(110, 115, 235);
  --tint-indigo-fg: rgb(129, 140, 248);

  --tint-emerald-solid: rgb(40, 190, 140);
  --tint-emerald-fg: rgb(52, 211, 153);
  --tint-emerald-wash: rgb(15, 45, 35);
  --tint-emerald-mid: rgb(35, 160, 115);

  --tint-amber-solid: rgb(220, 135, 30);
  --tint-amber-fg: rgb(251, 191, 36);
  --tint-amber-wash: rgb(55, 40, 15);
  --tint-amber-mid: rgb(200, 170, 50);

  --tint-orange-solid: rgb(245, 125, 45);
  --tint-orange-fg: rgb(251, 146, 60);

  --tint-teal-solid: rgb(45, 190, 175);
  --tint-teal-fg: rgb(94, 234, 212);

  --tint-purple-solid: rgb(175, 100, 245);
  --tint-purple-fg: rgb(192, 132, 252);

  --tint-cyan-solid: rgb(34, 190, 220);
  --tint-cyan-fg: rgb(103, 232, 249);

  --tint-green-solid: rgb(60, 205, 110);
  --tint-green-fg: rgb(74, 222, 128);

  --tint-red-solid: rgb(220, 60, 60);
  --tint-red-fg: rgb(248, 113, 113);

  /* Soft pastel backgrounds for tinted chips / badges in dark mode. Deep
     desaturated overlays so the `-fg` foreground stays legible. Mirrors the
     light-mode block above. */
  --tint-slate-bg: rgb(30, 35, 45);
  --tint-blue-bg: rgb(23, 37, 64);
  --tint-violet-bg: rgb(35, 25, 60);
  --tint-sky-bg: rgb(15, 40, 60);
  --tint-rose-bg: rgb(60, 25, 35);
  --tint-indigo-bg: rgb(35, 35, 70);
  --tint-emerald-bg: rgb(15, 45, 35);
  --tint-amber-bg: rgb(55, 40, 15);
  --tint-orange-bg: rgb(55, 35, 18);
  --tint-teal-bg: rgb(20, 45, 45);
  --tint-purple-bg: rgb(45, 25, 55);
  --tint-cyan-bg: rgb(15, 40, 50);
  --tint-red-bg: rgb(60, 20, 25);

  /* Inner Fills - Dark */
  --glass-inner-inset-bg: rgba(0, 0, 0, 0.14);
  --glass-inner-inset-bg-hover: rgba(0, 0, 0, 0.20);
  --glass-inner-inset-border: 1px solid rgba(255, 255, 255, 0.04);

  --glass-inner-raised-bg: rgba(255, 255, 255, 0.06);
  --glass-inner-raised-bg-hover: rgba(255, 255, 255, 0.10);
  --glass-inner-raised-border: 1px solid rgba(255, 255, 255, 0.10);
  --glass-inner-raised-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);

  --glass-inner-pill-bg: rgba(255, 255, 255, 0.07);
  --glass-inner-pill-bg-hover: rgba(255, 255, 255, 0.12);
  --glass-inner-pill-border: 1px solid rgba(255, 255, 255, 0.08);

  --glass-field-bg: rgba(20, 20, 25, 0.55);
  --glass-field-border-hover: rgba(255, 255, 255, 0.22);

  /* Canvas card surface fills — Dark */
  --semi-bg: rgba(20, 20, 25, 0.38);
  --semi-bg-hover: rgba(20, 20, 25, 0.48);
  --solid-bg: rgba(20, 20, 25, 0.72);
  --solid-bg-hover: rgba(20, 20, 25, 0.80);

  /* Overlay backdrop — Dark */
  --overlay-backdrop: rgba(0, 0, 0, 0.45);
}

/* =============================================================================
   REDUCED TRANSPARENCY
   Replace all glass/frost with fully opaque solid fills.
   ============================================================================= */

@media (prefers-reduced-transparency: reduce) {
  :root {
    --glass-blur: none;
    --glass-content-bg: var(--color-bg-panel, #fff);
    --glass-content-blur: none;
    --glass-content-border: 1px solid var(--color-border-light, rgba(0, 0, 0, 0.1));
    --glass-content-glow: none;
    --glass-content-bg-hover: var(--color-bg-hover, #f5f5f5);
    --glass-content-border-hover: 1px solid var(--color-border, rgba(0, 0, 0, 0.15));

    --glass-chrome-bg: var(--color-bg-panel, #fff);
    --glass-chrome-blur: none;
    --glass-chrome-border: 1px solid var(--color-border-light, rgba(0, 0, 0, 0.1));
    --glass-chrome-glow: none;
    --glass-chrome-bg-hover: var(--color-bg-hover, #f5f5f5);
    --glass-chrome-border-hover: 1px solid var(--color-border, rgba(0, 0, 0, 0.15));

    --glass-input-bg: var(--color-bg-panel, #fff);
    --glass-input-blur: none;
    --glass-input-glow: none;
    --glass-input-bg-hover: var(--color-bg-hover, #f5f5f5);

    --glass-overlay-bg: var(--color-bg-panel, #fff);
    --glass-overlay-blur: none;
    --glass-overlay-glow: none;
    --glass-overlay-bg-hover: var(--color-bg-hover, #f5f5f5);
  }

  /* .theme-dark has higher specificity than :root — must repeat overrides */
  .theme-dark {
    --glass-blur: none;
    --glass-content-bg: var(--color-bg-panel, #1a1a1f);
    --glass-content-blur: none;
    --glass-content-border: 1px solid var(--color-border-light, rgba(255, 255, 255, 0.08));
    --glass-content-glow: none;
    --glass-content-bg-hover: var(--color-bg-hover, #2a2a2f);
    --glass-content-border-hover: 1px solid var(--color-border, rgba(255, 255, 255, 0.12));

    --glass-chrome-bg: var(--color-bg-panel, #1a1a1f);
    --glass-chrome-blur: none;
    --glass-chrome-border: 1px solid var(--color-border-light, rgba(255, 255, 255, 0.08));
    --glass-chrome-glow: none;
    --glass-chrome-bg-hover: var(--color-bg-hover, #2a2a2f);
    --glass-chrome-border-hover: 1px solid var(--color-border, rgba(255, 255, 255, 0.12));

    --glass-input-bg: var(--color-bg-panel, #1a1a1f);
    --glass-input-blur: none;
    --glass-input-glow: none;
    --glass-input-bg-hover: var(--color-bg-hover, #2a2a2f);

    --glass-overlay-bg: var(--color-bg-panel, #1a1a1f);
    --glass-overlay-blur: none;
    --glass-overlay-glow: none;
    --glass-overlay-bg-hover: var(--color-bg-hover, #2a2a2f);
  }
}