/* os-v11/themes.css — hyOS v1.1
 * Theme integration: makes all v1.1 glass tint with the active color theme
 * Covers: default dark (jarvis), clean/light mode, all data-theme variants
 * References: hypatia-themes.js token system, contained-app glass spec, macOS 26
 */

/* ──────────────────────────────────────────────────────────────
   Default: glass tinted with --accent (green in Jarvis/default)
   All v11 glass tinting derives from the active --accent token.
   Never hardcode palette — always use color-mix() with --accent.
   ────────────────────────────────────────────────────────────── */
:root {
  --v11-tint:           color-mix(in srgb, var(--accent, #00ffa3) 22%, transparent);
  --v11-tint-subtle:    color-mix(in srgb, var(--accent, #00ffa3) 10%, transparent);
  --v11-tint-strong:    color-mix(in srgb, var(--accent, #00ffa3) 35%, transparent);
  --v11-glow:           0 0 40px color-mix(in srgb, var(--accent, #00ffa3) 20%, transparent);
  --v11-glow-sm:        0 0 20px color-mix(in srgb, var(--accent, #00ffa3) 12%, transparent);
  --v11-glow-lg:        0 0 80px color-mix(in srgb, var(--accent, #00ffa3) 28%, transparent);
  --v11-border-accent:  color-mix(in srgb, var(--accent, #00ffa3) 28%, rgba(255,255,255,0.12));
  --v11-specular:       color-mix(in srgb, var(--accent, #00ffa3) 45%, rgba(255,255,255,0.55));
}

/* ──────────────────────────────────────────────────────────────
   Glass Component Base (applies to all elements with v11-glass)
   Tinted with --accent via color-mix, specular inset top highlight
   ────────────────────────────────────────────────────────────── */
.v11-glass {
  /* Fallback for non-supporting browsers */
  background: var(--v11-glass-bg, rgba(12, 12, 20, 0.52));
  border: 1px solid var(--v11-border-accent);
  border-radius: var(--v11-radius, 18px);
  box-shadow: var(--v11-shadow);
  position: relative;
  overflow: hidden;
}

/* Backdrop filter enhancement where supported */
@supports (backdrop-filter: blur(1px)) {
  .v11-glass {
    background: var(--v11-glass-bg, rgba(12, 12, 20, 0.52));
    backdrop-filter: var(--v11-backdrop);
    -webkit-backdrop-filter: var(--v11-backdrop);
  }
}

/* Soft-light tint layer via ::before (accent-tinted, non-destructive) */
.v11-glass::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    135deg,
    var(--v11-tint, color-mix(in srgb, var(--accent, #00ffa3) 22%, transparent)),
    var(--v11-tint-subtle, color-mix(in srgb, var(--accent, #00ffa3) 10%, transparent))
  );
  mix-blend-mode: soft-light;
  pointer-events: none;
  z-index: 0;
}

/* ──────────────────────────────────────────────────────────────
   Glass Variants
   ────────────────────────────────────────────────────────────── */
.v11-glass-sm {
  border-radius: var(--v11-radius-sm, 12px);
  box-shadow: var(--v11-shadow-sm);
}

.v11-glass-lg {
  border-radius: var(--v11-radius-lg, 24px);
  box-shadow: var(--v11-shadow-lg);
}

/* Heavy blur — for modals and spotlights */
@supports (backdrop-filter: blur(1px)) {
  .v11-glass-heavy {
    backdrop-filter: var(--v11-backdrop-heavy);
    -webkit-backdrop-filter: var(--v11-backdrop-heavy);
  }
}

/* Light blur — for overlays and dock */
@supports (backdrop-filter: blur(1px)) {
  .v11-glass-light {
    backdrop-filter: var(--v11-backdrop-light);
    -webkit-backdrop-filter: var(--v11-backdrop-light);
  }
}

/* ──────────────────────────────────────────────────────────────
   Jarvis Mode (default dark + green neon)
   Body.jarvis or [data-platform="jarvis"]
   Deeper, more saturated green accent
   ────────────────────────────────────────────────────────────── */
.jarvis,
[data-mode="jarvis"] {
  --v11-glass-bg:     rgba(6, 12, 10, 0.60);
  --v11-glass-bg-dark: rgba(4, 8, 6, 0.75);
  --v11-tint:          color-mix(in srgb, var(--accent, #00ffa3) 26%, transparent);
  --v11-tint-subtle:   color-mix(in srgb, var(--accent, #00ffa3) 12%, transparent);
  --v11-border-accent: color-mix(in srgb, var(--accent, #00ffa3) 35%, rgba(0, 255, 163, 0.10));
  --v11-specular:      color-mix(in srgb, var(--accent, #00ffa3) 50%, rgba(255, 255, 255, 0.45));
  --v11-glow:          0 0 40px color-mix(in srgb, var(--accent, #00ffa3) 28%, transparent);
  --v11-glow-sm:       0 0 20px color-mix(in srgb, var(--accent, #00ffa3) 16%, transparent);
  --v11-glow-lg:       0 0 80px color-mix(in srgb, var(--accent, #00ffa3) 36%, transparent);
}

/* Jarvis glass gets slightly greener tint via soft-light */
.jarvis .v11-glass::before,
[data-mode="jarvis"] .v11-glass::before {
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--accent, #00ffa3) 30%, rgba(0, 20, 12, 0.15)),
    color-mix(in srgb, var(--accent, #00ffa3) 14%, rgba(0, 20, 12, 0.08))
  );
  mix-blend-mode: soft-light;
}

/* ──────────────────────────────────────────────────────────────
   Clean Mode (iOS layout — DARK glass with full color theming)
   Body.clean is the PRIMARY layout for all users.
   Uses dark glass foundation so every color theme (grey, gold,
   miami, tron, beach, etc.) applies with full glow + animations.
   Beach/summer-beach override below for those warm light themes.
   ────────────────────────────────────────────────────────────── */
.clean,
[data-mode="clean"] {
  /* Dark glass — same foundation as jarvis, accent-tinted */
  --v11-glass-bg:      rgba(10, 10, 18, 0.62);
  --v11-glass-bg-dark: rgba(5, 5, 10, 0.76);
  --v11-tint:          color-mix(in srgb, var(--accent, #00ffa3) 22%, transparent);
  --v11-tint-subtle:   color-mix(in srgb, var(--accent, #00ffa3) 10%, transparent);
  --v11-tint-strong:   color-mix(in srgb, var(--accent, #00ffa3) 35%, transparent);
  --v11-border-accent: color-mix(in srgb, var(--accent, #00ffa3) 30%, rgba(255, 255, 255, 0.10));
  --v11-specular:      color-mix(in srgb, var(--accent, #00ffa3) 45%, rgba(255, 255, 255, 0.55));
  --v11-glow:          0 0 40px color-mix(in srgb, var(--accent, #00ffa3) 22%, transparent);
  --v11-glow-sm:       0 0 20px color-mix(in srgb, var(--accent, #00ffa3) 14%, transparent);
  --v11-glow-lg:       0 0 80px color-mix(in srgb, var(--accent, #00ffa3) 30%, transparent);
}

/* Clean mode glass — full blur, dark tinted */
@supports (backdrop-filter: blur(1px)) {
  .clean .v11-glass,
  [data-mode="clean"] .v11-glass {
    backdrop-filter: saturate(240%) blur(var(--v11-blur)) brightness(1.10);
    -webkit-backdrop-filter: saturate(240%) blur(var(--v11-blur)) brightness(1.10);
  }
}

/* Clean mode glass tint — accent-colored soft-light (matches jarvis) */
.clean .v11-glass::before,
[data-mode="clean"] .v11-glass::before {
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--accent, #00ffa3) 26%, rgba(0, 20, 12, 0.15)),
    color-mix(in srgb, var(--accent, #00ffa3) 12%, rgba(0, 20, 12, 0.08))
  );
  mix-blend-mode: soft-light;
}

/* Beach / summer-beach — warm light glass (the only light-mode exception) */
[data-theme="beach"],
[data-theme="summer-beach"] {
  --v11-glass-bg:      rgba(255, 245, 230, 0.65);
  --v11-glass-bg-dark: rgba(240, 225, 210, 0.75);

/* ── Beach/summer-beach specificity fix (2026-07-15) ──────────────────────────
   Problem: body.clean sets --v11-glass-bg: rgba(10,10,18,.62) (dark) at
   specificity 0,1,0. The html[data-theme] rule above has specificity 0,0,1
   and loses. Result: beach drawer renders dark glass with dark text = fail.
   Fix: html[data-theme="beach"] .clean = specificity 0,2,0 — beats body.clean.
   ────────────────────────────────────────────────────────────────────────── */
html[data-theme="beach"] .clean,
html[data-theme="summer-beach"] .clean {
  --v11-glass-bg:      rgba(255, 245, 230, 0.84);
  --v11-glass-bg-dark: rgba(240, 225, 210, 0.92);
}

/* ── Beach drawer, search, and app text — ensure readable on warm bg ── */
html[data-theme="beach"] .clean #os-drawer,
html[data-theme="summer-beach"] .clean #os-drawer {
  background: rgba(255, 245, 230, 0.88);
  backdrop-filter: saturate(180%) blur(40px) brightness(1.04);
}
html[data-theme="beach"] .clean .os-app-name,
html[data-theme="summer-beach"] .clean .os-app-name {
  color: var(--text, #3e2723);
}
html[data-theme="beach"] .clean .os-app-desc,
html[data-theme="summer-beach"] .clean .os-app-desc {
  color: color-mix(in srgb, var(--text, #3e2723) 70%, transparent);
}
html[data-theme="beach"] .clean #os-search,
html[data-theme="summer-beach"] .clean #os-search {
  color: var(--text, #3e2723);
  background: rgba(240, 225, 200, 0.6);
  border-color: rgba(0, 0, 0, 0.12);
}
html[data-theme="beach"] .clean .os-cat-pill,
html[data-theme="summer-beach"] .clean .os-cat-pill {
  color: color-mix(in srgb, var(--accent) 80%, #000);
}
  --v11-tint:          color-mix(in srgb, var(--accent) 10%, rgba(255, 210, 160, 0.18));
  --v11-tint-subtle:   color-mix(in srgb, var(--accent) 5%,  rgba(255, 220, 180, 0.10));
  --v11-border-accent: color-mix(in srgb, var(--accent) 20%, rgba(0, 0, 0, 0.10));
  --v11-specular:      rgba(255, 255, 255, 0.90);
  --v11-glow:          0 0 40px color-mix(in srgb, var(--accent) 14%, transparent);
  --v11-glow-sm:       0 0 20px color-mix(in srgb, var(--accent) 9%,  transparent);
  --v11-glow-lg:       0 0 80px color-mix(in srgb, var(--accent) 20%, transparent);
}

/* ── ALL LIGHT MODES: frosted white glass OS chrome ─────────────────────
   html[data-mode="light"] .clean = specificity 0,2,0 — beats body.clean (0,1,0).
   Applies frosted-white glass vars for any light theme (beach has its own above).
   All OS surfaces (taskbar, drawer, dock, windows) auto-adapt.
   --text from the theme CSS is dark in light mode → readable on white glass.
   ─────────────────────────────────────────────────────────────── */
html[data-mode="light"] .clean {
  --v11-glass-bg:       rgba(255, 255, 255, 0.72);
  --v11-glass-bg-dark:  rgba(245, 247, 255, 0.88);
  --v11-tint:           color-mix(in srgb, var(--accent) 12%, rgba(255,255,255,0.15));
  --v11-tint-subtle:    color-mix(in srgb, var(--accent) 6%,  rgba(255,255,255,0.08));
  --v11-tint-strong:    color-mix(in srgb, var(--accent) 22%, rgba(255,255,255,0.20));
  --v11-border-accent:  color-mix(in srgb, var(--accent) 28%, rgba(0,0,0,0.08));
  --v11-specular:       rgba(255, 255, 255, 0.90);
  --v11-glow-sm:        0 0 20px color-mix(in srgb, var(--accent) 12%, transparent);
  --v11-glow:           0 0 40px color-mix(in srgb, var(--accent) 20%, transparent);
  --v11-glow-lg:        0 0 80px color-mix(in srgb, var(--accent) 28%, transparent);
}
/* Softer backdrop for light glass */
html[data-mode="light"] .clean #os-taskbar,
html[data-mode="light"] .clean #os-drawer,
html[data-mode="light"] .clean #clean-dock { backdrop-filter: saturate(180%) blur(40px) brightness(1.05); }

/* ───────────────────────────────────────────────────────────────
   data-theme Variants
   Each theme overrides accent-derived custom properties only.
   The glass system inherits from --accent automatically.
   ─────────────────────────────────────────────────────────────── */

/* Grey theme — muted, charcoal glass */
[data-theme="grey"] {
  --v11-glass-bg:     rgba(18, 18, 22, 0.62);
  --v11-tint:          color-mix(in srgb, var(--accent, #9ca3af) 20%, transparent);
  --v11-tint-subtle:   color-mix(in srgb, var(--accent, #9ca3af) 8%, transparent);
}

/* Gold Luxury theme — warm champagne glass */
[data-theme="gold"] {
  --v11-glass-bg:     rgba(14, 10, 4, 0.58);
  --v11-tint:          color-mix(in srgb, var(--accent, #d4a843) 22%, transparent);
  --v11-tint-subtle:   color-mix(in srgb, var(--accent, #d4a843) 10%, transparent);
  --v11-specular:      color-mix(in srgb, var(--accent, #d4a843) 55%, rgba(255, 255, 255, 0.60));
}

/* Tron theme — electric blue, sharp grid aesthetic */
[data-theme="tron"] {
  --v11-glass-bg:     rgba(0, 4, 20, 0.65);
  --v11-glass-bg-dark: rgba(0, 2, 14, 0.78);
  --v11-tint:          color-mix(in srgb, var(--accent, #3af0ff) 24%, transparent);
  --v11-tint-subtle:   color-mix(in srgb, var(--accent, #3af0ff) 11%, transparent);
  --v11-border-accent: color-mix(in srgb, var(--accent, #3af0ff) 32%, rgba(0, 200, 255, 0.12));
  --v11-specular:      color-mix(in srgb, var(--accent, #3af0ff) 52%, rgba(255, 255, 255, 0.50));
  --v11-glow:          0 0 40px color-mix(in srgb, var(--accent, #3af0ff) 24%, transparent);
  --v11-glow-lg:       0 0 80px color-mix(in srgb, var(--accent, #3af0ff) 36%, transparent);
}

/* Clean Light theme (explicit) */
[data-theme="light"] {
  --v11-glass-bg:     rgba(255, 255, 255, 0.60);
  --v11-tint:          color-mix(in srgb, var(--accent, #6366f1) 10%, rgba(255, 255, 255, 0.18));
  --v11-tint-subtle:   color-mix(in srgb, var(--accent, #6366f1) 5%, rgba(255, 255, 255, 0.08));
  --v11-border-accent: color-mix(in srgb, var(--accent, #6366f1) 16%, rgba(0, 0, 0, 0.08));
  --v11-specular:      rgba(255, 255, 255, 0.94);
}

/* Purple / Deep Space */
[data-theme="purple"] {
  --v11-glass-bg:     rgba(10, 6, 20, 0.58);
  --v11-tint:          color-mix(in srgb, var(--accent, #b47aff) 22%, transparent);
  --v11-tint-subtle:   color-mix(in srgb, var(--accent, #b47aff) 10%, transparent);
  --v11-specular:      color-mix(in srgb, var(--accent, #b47aff) 48%, rgba(255, 255, 255, 0.52));
  --v11-glow:          0 0 40px color-mix(in srgb, var(--accent, #b47aff) 22%, transparent);
  --v11-glow-lg:       0 0 80px color-mix(in srgb, var(--accent, #b47aff) 32%, transparent);
}

/* ──────────────────────────────────────────────────────────────
   Text Effect: Holograph (title-level elements)
   Used on brand wordmarks and hero text
   ────────────────────────────────────────────────────────────── */
.v11-text-holo {
  background: linear-gradient(
    90deg,
    #ffffff 0%,
    color-mix(in srgb, var(--accent, #00ffa3) 100%, #ffffff) 20%,
    #e879f9 38%,
    #38bdf8 55%,
    color-mix(in srgb, var(--accent, #00ffa3) 80%, #ffffff) 72%,
    #ffffff 88%,
    color-mix(in srgb, var(--accent, #00ffa3) 100%, #ffffff) 100%
  );
  background-size: 300% auto;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: v11-holo-shift 8s linear infinite;
  font-family: var(--v11-font-display);
  font-weight: var(--v11-fw-bold);
}

/* Holograph: static fallback (no animation context) */
@supports not (background-clip: text) {
  .v11-text-holo {
    background: none;
    color: var(--accent, #00ffa3);
  }
}

/* ──────────────────────────────────────────────────────────────
   Text Effect: Iridescent (subheading level)
   Subtler hue-shift for secondary accents
   ────────────────────────────────────────────────────────────── */
.v11-text-iridescent {
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--accent, #00ffa3) 100%, transparent),
    #c084fc,
    #38bdf8,
    color-mix(in srgb, var(--accent, #00ffa3) 80%, #ffffff)
  );
  background-size: 200% auto;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: v11-iridescent 10s linear infinite;
}

/* ──────────────────────────────────────────────────────────────
   Text Effect: Aurora (body/label level)
   Shifting pastel gradient text for ambient labels
   ────────────────────────────────────────────────────────────── */
.v11-text-aurora {
  background: linear-gradient(
    90deg,
    #a78bfa,
    color-mix(in srgb, var(--accent, #00ffa3) 70%, #a78bfa),
    #38bdf8,
    #f472b6,
    #a78bfa
  );
  background-size: 250% auto;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: v11-holo-shift 12s linear infinite;
}

/* ──────────────────────────────────────────────────────────────
   Fallback: @supports not backdrop-filter
   Opaque fallback for Firefox ESR and older WebKit
   ────────────────────────────────────────────────────────────── */
@supports not (backdrop-filter: blur(1px)) {
  .v11-glass {
    background: color-mix(in srgb,
      var(--bg-card, rgba(12, 12, 20, 1)) 90%,
      var(--v11-tint, rgba(0, 255, 163, 0.10))
    );
  }

  .clean .v11-glass,
  [data-mode="clean"] .v11-glass,
  [data-theme="light"] .v11-glass {
    background: rgba(248, 248, 252, 0.96);
  }
}

/* ──────────────────────────────────────────────────────────────
   Reduced Motion: Disable text animation effects
   ────────────────────────────────────────────────────────────── */