/* ═══════════════════════════════════════════════════════════════
   HoK Vault — CSS Variables
   Apple-Inspired Liquid Glass Material System
   Tokens for Scheme (Dark/Light) & Accent Colors
   ═══════════════════════════════════════════════════════════════ */

/* ───────────── THEME: COLOR SCHEME ───────────── */

[data-scheme="dark"] {
  --bg-base: #06070d;
  --bg-surface: rgba(255, 255, 255, 0.03);
  --bg-surface-hover: rgba(255, 255, 255, 0.06);
  --bg-elevated: #0f111c;
  --bg-modal: rgba(13, 15, 25, 0.82);

  --text-primary: #f8fafc;
  --text-secondary: #94a3b8;
  --text-tertiary: #64748b;
  --text-muted: #475569;

  /* Liquid Glass Surface Tiers (Concept: Glass 1 / 2 / 3) */
  --glass-bg-subtle: rgba(255, 255, 255, 0.02);
  --glass-bg: rgba(255, 255, 255, 0.035);
  --glass-bg-elevated: rgba(18, 20, 32, 0.68);
  --glass-bg-overlay: rgba(15, 17, 28, 0.85);
  --glass-bg-solid: #0d0f1a;

  /* Low-Contrast Liquid Glass Separators (Almost Invisible) */
  --glass-border: rgba(255, 255, 255, 0.045);
  --glass-border-subtle: rgba(255, 255, 255, 0.025);
  --glass-border-hover: rgba(255, 255, 255, 0.08);
  --glass-border-active: rgba(255, 255, 255, 0.12);

  /* Pure Ambient Depth Shadows (No Harsh White Outline / Glow) */
  --glass-shadow: 0 10px 30px -6px rgba(0, 0, 0, 0.5);
  --glass-shadow-hover: 0 18px 44px -8px rgba(0, 0, 0, 0.65);
  --glass-shadow-elevated: 0 28px 72px -12px rgba(0, 0, 0, 0.75);
  --glass-shadow-popover: 0 14px 38px -6px rgba(0, 0, 0, 0.65);
  --glass-depth: 0 2px 6px -1px rgba(0, 0, 0, 0.4);

  /* Ambient Lighting / Highlight */
  --glass-highlight: linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, transparent 100%);
  --glass-refraction: transparent;

  /* Nav & Overlays */
  --nav-bg: rgba(10, 11, 20, 0.72);
  --card-gradient-overlay: linear-gradient(to top, rgba(6, 7, 13, 0.98) 0%, rgba(6, 7, 13, 0.82) 55%, rgba(6, 7, 13, 0.25) 85%, transparent 100%);
  --detail-gradient: linear-gradient(to top, rgba(13, 15, 25, 0.96) 0%, transparent 100%);

  /* Form Inputs (Soft, Translucent, Low Contrast, No White Outlines) */
  --input-bg: rgba(255, 255, 255, 0.03);
  --input-bg-hover: rgba(255, 255, 255, 0.05);
  --input-border: rgba(255, 255, 255, 0.045);
  --input-focus-border: var(--accent);
  --input-focus-ring: var(--accent-15);

  /* Misc */
  --orb-opacity: 0.16;
  --scrollbar-thumb: rgba(255, 255, 255, 0.07);
  --scrollbar-thumb-hover: rgba(255, 255, 255, 0.12);
  --divider: rgba(255, 255, 255, 0.04);
  --modal-backdrop-bg: rgba(4, 5, 10, 0.68);
}

[data-scheme="light"] {
  --bg-base: #f5f6fa;
  --bg-surface: rgba(255, 255, 255, 0.72);
  --bg-surface-hover: rgba(255, 255, 255, 0.9);
  --bg-elevated: #ffffff;
  --bg-modal: rgba(255, 255, 255, 0.88);

  --text-primary: #0f172a;
  --text-secondary: #475569;
  --text-tertiary: #64748b;
  --text-muted: #94a3b8;

  /* Liquid Glass Surface Tiers (Concept: Glass 1 / 2 / 3) */
  --glass-bg-subtle: rgba(255, 255, 255, 0.52);
  --glass-bg: rgba(255, 255, 255, 0.7);
  --glass-bg-elevated: rgba(255, 255, 255, 0.85);
  --glass-bg-overlay: rgba(255, 255, 255, 0.92);
  --glass-bg-solid: #ffffff;

  /* Low-Contrast Liquid Glass Separators (Almost Invisible) */
  --glass-border: rgba(0, 0, 0, 0.045);
  --glass-border-subtle: rgba(0, 0, 0, 0.025);
  --glass-border-hover: rgba(0, 0, 0, 0.08);
  --glass-border-active: rgba(0, 0, 0, 0.12);

  /* Soft Ambient Light Mode Depth Shadows */
  --glass-shadow: 0 8px 24px -4px rgba(0, 0, 0, 0.05);
  --glass-shadow-hover: 0 16px 36px -6px rgba(0, 0, 0, 0.07);
  --glass-shadow-elevated: 0 24px 60px -10px rgba(0, 0, 0, 0.09);
  --glass-shadow-popover: 0 12px 32px -4px rgba(0, 0, 0, 0.08);
  --glass-depth: 0 2px 6px -2px rgba(0, 0, 0, 0.04);

  /* Ambient Lighting / Highlight */
  --glass-highlight: linear-gradient(180deg, rgba(255, 255, 255, 0.5) 0%, transparent 100%);
  --glass-refraction: transparent;

  /* Nav & Overlays */
  --nav-bg: rgba(255, 255, 255, 0.78);
  --card-gradient-overlay: linear-gradient(to top, rgba(245, 246, 250, 0.98) 0%, rgba(245, 246, 250, 0.82) 55%, rgba(245, 246, 250, 0.25) 85%, transparent 100%);
  --detail-gradient: linear-gradient(to top, rgba(255, 255, 255, 0.98) 0%, transparent 100%);

  /* Form Inputs */
  --input-bg: rgba(0, 0, 0, 0.025);
  --input-bg-hover: rgba(0, 0, 0, 0.045);
  --input-border: rgba(0, 0, 0, 0.05);
  --input-focus-border: var(--accent);
  --input-focus-ring: var(--accent-15);

  /* Misc */
  --orb-opacity: 0.07;
  --scrollbar-thumb: rgba(0, 0, 0, 0.08);
  --scrollbar-thumb-hover: rgba(0, 0, 0, 0.15);
  --divider: rgba(0, 0, 0, 0.05);
  --modal-backdrop-bg: rgba(15, 23, 42, 0.28);
}

/* ───────────── THEME: ACCENT COLORS ───────────── */

[data-accent="gold"]   { --accent: #f0b429; --accent-light: #fde68a; --accent-dark: #b44d12; --accent-40: rgba(240,180,41,0.4); --accent-20: rgba(240,180,41,0.2); --accent-15: rgba(240,180,41,0.15); --accent-10: rgba(240,180,41,0.1); --accent-08: rgba(240,180,41,0.08); --accent-text-on: #0a0a18; }
[data-accent="ruby"]   { --accent: #f43f5e; --accent-light: #fda4af; --accent-dark: #9f1239; --accent-40: rgba(244,63,94,0.4); --accent-20: rgba(244,63,94,0.2); --accent-15: rgba(244,63,94,0.15); --accent-10: rgba(244,63,94,0.1); --accent-08: rgba(244,63,94,0.08); --accent-text-on: #fff; }
[data-accent="violet"] { --accent: #8b5cf6; --accent-light: #c4b5fd; --accent-dark: #5b21b6; --accent-40: rgba(139,92,246,0.4); --accent-20: rgba(139,92,246,0.2); --accent-15: rgba(139,92,246,0.15); --accent-10: rgba(139,92,246,0.1); --accent-08: rgba(139,92,246,0.08); --accent-text-on: #fff; }
[data-accent="ocean"]  { --accent: #06b6d4; --accent-light: #67e8f9; --accent-dark: #0e7490; --accent-40: rgba(6,182,212,0.4); --accent-20: rgba(6,182,212,0.2); --accent-15: rgba(6,182,212,0.15); --accent-10: rgba(6,182,212,0.1); --accent-08: rgba(6,182,212,0.08); --accent-text-on: #0a0a18; }
[data-accent="jade"]   { --accent: #10b981; --accent-light: #6ee7b7; --accent-dark: #047857; --accent-40: rgba(16,185,129,0.4); --accent-20: rgba(16,185,129,0.2); --accent-15: rgba(16,185,129,0.15); --accent-10: rgba(16,185,129,0.1); --accent-08: rgba(16,185,129,0.08); --accent-text-on: #0a0a18; }
[data-accent="rose"]   { --accent: #fb7185; --accent-light: #fecdd3; --accent-dark: #be123c; --accent-40: rgba(251,113,133,0.4); --accent-20: rgba(251,113,133,0.2); --accent-15: rgba(251,113,133,0.15); --accent-10: rgba(251,113,133,0.1); --accent-08: rgba(251,113,133,0.08); --accent-text-on: #0a0a18; }
[data-accent="amber"]  { --accent: #f59e0b; --accent-light: #fde68a; --accent-dark: #92400e; --accent-40: rgba(245,158,11,0.4); --accent-20: rgba(245,158,11,0.2); --accent-15: rgba(245,158,11,0.15); --accent-10: rgba(245,158,11,0.1); --accent-08: rgba(245,158,11,0.08); --accent-text-on: #0a0a18; }
[data-accent="sky"]    { --accent: #0ea5e9; --accent-light: #7dd3fc; --accent-dark: #0369a1; --accent-40: rgba(14,165,233,0.4); --accent-20: rgba(14,165,233,0.2); --accent-15: rgba(14,165,233,0.15); --accent-10: rgba(14,165,233,0.1); --accent-08: rgba(14,165,233,0.08); --accent-text-on: #0a0a18; }
[data-accent="lime"]   { --accent: #84cc16; --accent-light: #bef264; --accent-dark: #4d7c0f; --accent-40: rgba(132,204,22,0.4); --accent-20: rgba(132,204,22,0.2); --accent-15: rgba(132,204,22,0.15); --accent-10: rgba(132,204,22,0.1); --accent-08: rgba(132,204,22,0.08); --accent-text-on: #0a0a18; }
[data-accent="coral"]  { --accent: #f97316; --accent-light: #fdba74; --accent-dark: #c2410c; --accent-40: rgba(249,115,22,0.4); --accent-20: rgba(249,115,22,0.2); --accent-15: rgba(249,115,22,0.15); --accent-10: rgba(249,115,22,0.1); --accent-08: rgba(249,115,22,0.08); --accent-text-on: #0a0a18; }

/* ───────────── SYSTEM DESIGN TOKENS ───────────── */

:root {
  --radius-xs: 8px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --radius-xl: 22px;
  --radius-2xl: 28px;
  --radius-full: 9999px;

  --blur-sm: 12px;
  --blur-md: 20px;
  --blur-lg: 32px;
  --blur-xl: 44px;

  --accent-solid: var(--accent);
  --accent-soft: var(--accent-15);
  --accent-subtle: var(--accent-08);
  --accent-glow: 0 4px 18px var(--accent-20);
}