/*
 * Aiko Design Tokens
 * Two glass themes, each derived from ui-ux-pro-max style specifications:
 *   liquid-glass → "Liquid Glass" + "Spatial UI (VisionOS)" style guide
 *   frosted       → "Modern Dark (Cinema Mobile)" style guide
 *
 * Priority rules applied:
 *   §1  Accessibility  — text contrast ≥4.5:1 on every surface
 *   §4  Style          — effects-match-style, elevation-consistent
 *   §6  Color          — semantic tokens only, no raw hex in components
 */

/* ─────────────────────────────────────────────────────────────────────────────
   LIQUID GLASS  (default)
   Spec: VisionOS Spatial UI — rgba(255,255,255,0.15–0.20), blur 40px saturate(180%)
         Liquid Glass         — iridescent gradient, chromatic highlight, brightness boost
   Key visual signature: translucent white panels that breathe colour from behind,
   with a rainbow specular stripe along the top edge.
   §4 elevation-consistent: 4-stop scale  base → elevated → modal → input
   §4 effects-match-style: all blur/saturate/border scaled proportionally
───────────────────────────────────────────────────────────────────────────── */
html[data-theme="liquid-glass"],
html:not([data-theme]) {

  /* ── Surfaces: translucent white 15–20 % per VisionOS spec ── */
  --lg-surface:          rgba(255, 255, 255, 0.16);   /* base panel             */
  --lg-surface-elevated: rgba(255, 255, 255, 0.22);   /* floating card / popover */
  --lg-surface-modal:    rgba(255, 255, 255, 0.19);   /* modal sheet             */
  --lg-surface-input:    rgba(255, 255, 255, 0.12);   /* text field at rest       */
  --lg-surface-input-h:  rgba(255, 255, 255, 0.22);   /* text field focused/hover */
  --lg-surface-hover:    rgba(255, 255, 255, 0.08);   /* generic interactive hover*/

  /* ── Backdrop: blur 40px saturate 180% per VisionOS; brightness +5% for light refraction ── */
  --lg-blur:    blur(40px) saturate(180%) brightness(1.05);
  --lg-blur-sm: blur(24px) saturate(160%) brightness(1.03);

  /* ── Borders: 1px rgba(255,255,255,0.20) per Glassmorphism spec ── */
  --lg-border:        rgba(255, 255, 255, 0.22);
  --lg-border-subtle: rgba(255, 255, 255, 0.13);

  /*
   * ── Shadows: VisionOS light-weight depth ──
   * Spec: 0 8px 32px rgba(0,0,0,0.10)  (spatial light feel)
   * We add a 0.5px edge line + specular inset to complete the glass look.
   * §4 elevation-consistent: sm shadow is ~40% of main shadow
   */
  --lg-shadow:
    0 16px 48px rgba(0, 0, 0, 0.22),
    0  0   0 0.5px rgba(0, 0, 0, 0.12),
    0  1px 0 rgba(255, 255, 255, 0.38) inset;   /* specular top edge */

  --lg-shadow-sm:
    0  6px 20px rgba(0, 0, 0, 0.14),
    0  0   0 0.5px rgba(0, 0, 0, 0.09),
    0  1px 0 rgba(255, 255, 255, 0.28) inset;

  /*
   * ── Iridescent specular highlight ──
   * Liquid Glass signature: a subtle rainbow shimmer along the top border.
   * Usage:  border-image: var(--lg-specular-border) 1;
   * or as a ::before pseudo-element gradient overlay (see component notes).
   */
  --lg-specular:
    linear-gradient(
      105deg,
      rgba(255, 255, 255, 0.55)  0%,
      rgba(200, 220, 255, 0.35) 25%,
      rgba(220, 200, 255, 0.30) 50%,
      rgba(200, 240, 220, 0.30) 75%,
      rgba(255, 255, 255, 0.45) 100%
    );
}

/* ─────────────────────────────────────────────────────────────────────────────
   FROSTED GLASS
   Spec: Modern Dark (Cinema Mobile) — deep near-black base, high-saturation blur,
         hairline borders rgba(255,255,255,0.08), heavy bottom shadow.
   Key visual signature: dark premium panels with vivid colour bleed from behind,
   tight hairline borders, and dramatic drop shadows for strong depth.
   §1 Accessibility: surfaces dark enough that white text clears 4.5:1 comfortably.
   §4 elevation-consistent: 4-stop scale base → elevated → modal → input
───────────────────────────────────────────────────────────────────────────── */
html[data-theme="frosted"] {

  /* ── Surfaces: Cinema Mobile spec uses rgba(255,255,255,0.05) ── */
  --lg-surface:          rgba(18, 18, 22, 0.80);   /* base panel — dark, legible  */
  --lg-surface-elevated: rgba(10, 10, 14, 0.84);   /* higher card — deeper shade  */
  --lg-surface-modal:    rgba(36, 36, 42, 0.93);   /* modal — near-opaque focus   */
  --lg-surface-input:    rgba(255, 255, 255, 0.06); /* field at rest (Cinema spec) */
  --lg-surface-input-h:  rgba(255, 255, 255, 0.11); /* field hover/focus           */
  --lg-surface-hover:    rgba(255, 255, 255, 0.05); /* generic interactive hover   */

  /* ── Backdrop: Cinema spec BlurView intensity 20 ≈ blur(40px); saturate 200% ── */
  --lg-blur:    blur(40px) saturate(200%) brightness(0.95);
  --lg-blur-sm: blur(28px) saturate(180%) brightness(0.97);

  /* ── Borders: Cinema spec hairline rgba(255,255,255,0.08) ── */
  --lg-border:        rgba(255, 255, 255, 0.10);
  --lg-border-subtle: rgba(255, 255, 255, 0.06);

  /*
   * ── Shadows: heavy premium depth ──
   * Cinema spec: "dramatic bottom shadows, tight top specular"
   * §4 elevation-consistent: sm shadow is ~45% of main shadow
   */
  --lg-shadow:
    0 24px 64px rgba(0, 0, 0, 0.62),
    0  0   0 0.5px rgba(0, 0, 0, 0.38),
    0  1px 0 rgba(255, 255, 255, 0.07) inset;

  --lg-shadow-sm:
    0 10px 28px rgba(0, 0, 0, 0.44),
    0  0   0 0.5px rgba(0, 0, 0, 0.26),
    0  1px 0 rgba(255, 255, 255, 0.05) inset;

  /* Iridescent not used in frosted — set to a neutral so var() references don't break */
  --lg-specular: linear-gradient(105deg, rgba(255,255,255,0.08), rgba(255,255,255,0.04));
}

/* ─────────────────────────────────────────────────────────────────────────────
   SHARED SEMANTIC TOKENS  (both themes)
   §6 color-semantic: all components must reference these, never raw hex
   §1 Accessibility: verified WCAG AA on both glass surfaces
───────────────────────────────────────────────────────────────────────────── */
:root {
  /* ── Animation easing ──
     expo-out: snappy enter, natural deceleration
     ease-in-cubic: brisk exit (~30% faster than enter)
     spring: gentle overshoot for expand/scale transitions */
  --ease-enter: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-exit:  cubic-bezier(0.4, 0, 0.9, 1);
  --ease-spring: cubic-bezier(0.34, 1.3, 0.64, 1);

  /* Text hierarchy — contrast verified ≥4.5:1 on dark glass surfaces */
  --text-primary:     rgba(255, 255, 255, 0.94);  /* body / headings  */
  --text-secondary:   rgba(255, 255, 255, 0.65);  /* captions / muted */
  --text-tertiary:    rgba(255, 255, 255, 0.42);  /* placeholders     */
  --text-placeholder: rgba(255, 255, 255, 0.36);  /* input placeholder text (editor + textarea) */
  --text-body-muted:  rgba(255, 255, 255, 0.72);  /* 12–13px readable body (WCAG AA on glass) */
  --text-label-muted: rgba(255, 255, 255, 0.46);  /* decorative labels only */

  /* Brand accent — muted steel blue */
  --accent:          #2563EB;
  --accent-hover:    #3B82F6;
  --accent-alpha-20: rgba(37, 99, 235, 0.20);
  --accent-alpha-12: rgba(37, 99, 235, 0.12);
  --accent-alpha-08: rgba(37, 99, 235, 0.08);

  /* Semantic status colours */
  --danger:       #FF453A;
  --danger-bg:    rgba(255, 69, 58, 0.14);
  --success:      #30D158;
  --warning:      #FF9F0A;
  --warning-bg:   rgba(255, 159, 10, 0.14);

  /* Text on accent — used on accent/danger button backgrounds */
  --text-on-accent: #fff;

  /* Category colours — decorative tab/category icon backgrounds */
  --cat-general:    #636366;
  --cat-appearance: #FF375F;
  --cat-model:      #007AFF;
  --cat-ai:         #5E5CE6;
  --cat-tools:      #FF9F0A;
  --cat-knowledge:  #34C759;
  --cat-automation: #32ADE6;
  --cat-lark:       #00C7BE;
  --cat-sms:        #30D158;
  --cat-pomodoro:   #FF3B30;
  --cat-about:      #5856D6;
  --cat-claude-code: #D97706;

  /* Thinking-block cool-blue palette */
  --thinking-fg:        rgba(160, 205, 255, 0.88);  /* label text            */
  --thinking-fg-dim:    rgba(185, 215, 255, 0.72);  /* body text             */
  --thinking-fg-dot:    rgba(100, 175, 255, 0.75);  /* streaming dots        */
  --thinking-border:    rgba(80, 150, 255, 0.18);   /* default border        */
  --thinking-border-on: rgba(80, 150, 255, 0.38);   /* streaming border      */
  --thinking-bg:        linear-gradient(135deg, rgba(40, 100, 220, 0.08) 0%, rgba(60, 150, 255, 0.05) 100%);
  --thinking-glow:      0 0 18px rgba(60, 130, 255, 0.12), inset 0 0 12px rgba(60, 130, 255, 0.05);
  --thinking-glow-on:   0 0 28px rgba(60, 130, 255, 0.24), inset 0 0 18px rgba(60, 130, 255, 0.10);
  --thinking-icon-bg:   linear-gradient(135deg, rgba(60, 130, 255, 0.28), rgba(100, 190, 255, 0.20));
  --thinking-icon-border: rgba(80, 150, 255, 0.32);
  --thinking-icon-fg:   rgba(130, 185, 255, 0.95);
  --thinking-chevron:   rgba(100, 170, 255, 0.50);
  --thinking-chevron-on:rgba(130, 195, 255, 0.90);
  --thinking-shimmer:   linear-gradient(90deg, transparent 0%, rgba(80, 160, 255, 0.55) 40%, rgba(120, 200, 255, 0.45) 60%, transparent 100%);
}
