:root {
  --c-blue: #0058D4;
  --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 + subtle aurora halos */
  --bg-body:
    radial-gradient(ellipse 100% 65% at 5%  -5%,  rgba(0, 88, 212, 0.09) 0%, transparent 55%),
    radial-gradient(ellipse 75%  55% at 96% 5%,   rgba(175, 109, 255, 0.07) 0%, transparent 52%),
    radial-gradient(ellipse 60%  50% at 50% 100%, rgba(99, 208, 89, 0.05) 0%, transparent 52%),
    radial-gradient(ellipse 45%  40% at 82% 65%,  rgba(255, 184, 1, 0.03) 0%, transparent 48%),
    radial-gradient(ellipse 35%  30% at 18% 75%,  rgba(0, 88, 212, 0.04) 0%, transparent 45%),
    #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);

  /* Ambient orb opacities — restrained, barely-there presence */
  --orb-1-op: 0.06;
  --orb-2-op: 0.05;
  --orb-3-op: 0.04;
}

/* ── Light Theme Glass Overrides ── */
html[data-theme="light"] {
  /* Frosted glass — opaque/milky, not see-through */
  --g-1: rgba(255, 255, 255, 0.65);
  --g-2: rgba(255, 255, 255, 0.70);
  --g-3: rgba(255, 255, 255, 0.80);
  --g-border: rgba(255, 255, 255, 0.82);
  --g-border-dim: rgba(0, 0, 0, 0.05);
  --g-border-strong: rgba(255, 255, 255, 0.96);
  --g-blur: blur(28px) saturate(150%) brightness(103%);
  --g-blur-heavy: blur(44px) saturate(160%) brightness(104%);
  --g-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.95),
    inset 0 -1px 0 rgba(0, 0, 0, 0.05),
    0 12px 40px rgba(80, 60, 160, 0.12),
    0 2px 8px rgba(0, 0, 0, 0.06);
  --g-shadow-card:
    inset 0 1px 0 rgba(255, 255, 255, 0.90),
    0 6px 28px rgba(60, 40, 130, 0.10),
    0 1px 4px rgba(0, 0, 0, 0.05);
  --g-shadow-hover:
    inset 0 1px 0 rgba(255, 255, 255, 0.96),
    0 16px 48px rgba(60, 40, 130, 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%
  );
  /* Near-pure white — micro-hint of brand color only at viewport corners */
  --bg-body:
    radial-gradient(ellipse 60% 45% at 0%   0%,   rgba(0, 88, 212, 0.04) 0%, transparent 60%),
    radial-gradient(ellipse 55% 40% at 100% 0%,   rgba(175, 109, 255, 0.03) 0%, transparent 55%),
    linear-gradient(160deg, #FFFFFF 0%, #FDFCFF 100%);
  --sidebar-bg:     rgba(255, 255, 255, 0.90);
  --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.03;
  --orb-2-op: 0.03;
  --orb-3-op: 0.02;
}