:root {
  --c-blue: #0058D4;
  --c-blue-light: #5B9BFF;
  --c-purple: #AF6DFF;
  --c-red: #F84F2E;
  --c-green: #63D059;
  --c-green-cta: #84CC16;
  --c-yellow: #FFB801;
  --c-yellow-em: #FACC15;
  --c-black: #1C1C1C;
  --c-cream: #FBF9F4;
  --c-cream-alt: #F5F0E8;
  --c-gray-dark: #27272A;
  --f-display: Sora, sans-serif;
  --f-body: Plus Jakarta Sans, sans-serif;
  --f-mono: JetBrains Mono, monospace;
  --f-script: Yellowtail, cursive;
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --t-fast: 200ms ease;
  --t-slow: 380ms cubic-bezier(0.4, 0, 0.2, 1);
  --sidebar-w: 260px;
  --content-max: 1600px;
}

/* ── Liquid Glass System ── */
:root {
  /* Glass surface opacity layers */
  --g-1: rgba(255, 255, 255, 0.055);
  --g-2: rgba(255, 255, 255, 0.085);
  --g-3: rgba(255, 255, 255, 0.125);

  /* Blur — base for most glass, heavy for featured cards */
  --g-blur: blur(28px) saturate(200%) brightness(108%);
  --g-blur-heavy: blur(48px) saturate(220%) brightness(112%);

  /* Borders */
  --g-border: rgba(255, 255, 255, 0.16);
  --g-border-dim: rgba(255, 255, 255, 0.04);
  --g-border-strong: rgba(255, 255, 255, 0.28);

  /* Multi-layer shadows — with subtle blue-tinted depth */
  --g-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.20),
    inset 0 -1px 0 rgba(0, 0, 0, 0.25),
    0 2px 4px rgba(0, 0, 0, 0.18),
    0 8px 24px rgba(0, 0, 0, 0.36),
    0 28px 72px rgba(0, 20, 60, 0.55);
  --g-shadow-card:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 -1px 0 rgba(0, 0, 0, 0.12),
    0 4px 12px rgba(0, 0, 0, 0.30),
    0 12px 36px rgba(0, 10, 40, 0.44);
  --g-shadow-hover:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 -1px 0 rgba(0, 0, 0, 0.10),
    0 6px 18px rgba(0, 0, 0, 0.35),
    0 18px 52px rgba(0, 20, 80, 0.52),
    0 0 0 1px rgba(255, 255, 255, 0.08);

  /* Prismatic specular — stronger chromatic dispersion */
  --g-specular: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.0) 8%,
    rgba(80, 160, 255, 0.35) 22%,
    rgba(200, 180, 255, 0.45) 38%,
    rgba(255, 255, 255, 0.72) 50%,
    rgba(180, 140, 255, 0.45) 62%,
    rgba(100, 200, 255, 0.30) 78%,
    rgba(255, 255, 255, 0.0) 92%,
    transparent 100%
  );

  /* Body background — deep abyss base */
  --bg-body: #08080e;

  /* Sidebar and footer glass surfaces */
  --sidebar-bg:     rgba(8, 8, 14, 0.82);
  --sidebar-border: rgba(255, 255, 255, 0.07);
  --sidebar-hover:  rgba(255, 255, 255, 0.05);
  --footer-bg:      rgba(6, 6, 10, 0.92);
  --footer-border:  rgba(255, 255, 255, 0.06);
}

/* ── Light Theme Glass Overrides ── */
html[data-theme="light"] {
  /* Frosted glass fill — opaque enough to look milky, not clear */
  --g-1: rgba(255, 255, 255, 0.62);
  --g-2: rgba(255, 255, 255, 0.68);
  --g-3: rgba(255, 255, 255, 0.78);
  --g-border: rgba(255, 255, 255, 0.92);
  --g-border-dim: rgba(0, 0, 0, 0.06);
  --g-border-strong: rgba(255, 255, 255, 0.98);
  /* Moderate saturation — just enough to hint color, not amplify it */
  --g-blur: blur(28px) saturate(160%) brightness(103%);
  --g-blur-heavy: blur(44px) saturate(170%) brightness(104%);
  --g-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.98),
    inset 0 -1px 0 rgba(0, 0, 0, 0.04),
    0 8px 32px rgba(80, 60, 160, 0.08),
    0 2px 8px rgba(0, 0, 0, 0.05);
  /* Purple-tinted shadows read as glass on a light background */
  --g-shadow-card:
    inset 0 1px 0 rgba(255, 255, 255, 0.90),
    0 6px 24px rgba(80, 60, 160, 0.12),
    0 1px 4px rgba(0, 0, 0, 0.05);
  --g-shadow-hover:
    inset 0 1px 0 rgba(255, 255, 255, 0.96),
    0 14px 42px rgba(80, 60, 160, 0.16),
    0 3px 10px rgba(0, 0, 0, 0.07);
  --g-specular: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.0) 10%,
    rgba(80, 120, 255, 0.45) 25%,
    rgba(255, 255, 255, 1.0) 50%,
    rgba(150, 100, 255, 0.45) 75%,
    rgba(255, 255, 255, 0.0) 90%,
    transparent 100%
  );
  /* Barely-there color pools — nearly pure white, brand color only at the edges */
  --bg-body:
    radial-gradient(ellipse 70% 50% at 0%   0%,  rgba(0, 88, 212, 0.05) 0%, transparent 60%),
    radial-gradient(ellipse 60% 45% at 100% 0%,  rgba(175, 109, 255, 0.04) 0%, transparent 55%),
    linear-gradient(160deg, #FFFFFF 0%, #FDFCFF 60%, #FAFBFF 100%);
  --sidebar-bg:     rgba(255, 253, 250, 0.86);
  --sidebar-border: rgba(0, 0, 0, 0.07);
  --sidebar-hover:  rgba(0, 0, 0, 0.04);
  --footer-bg:      rgba(253, 251, 247, 0.84);
  --footer-border:  rgba(0, 0, 0, 0.06);
  --orb-1-op: 0.04;
  --orb-2-op: 0.04;
  --orb-3-op: 0.03;
}