:root {
  /* Brand core */
  --cream-50: #fffdf8;
  --cream-100: #fff8e8;
  --sun-300: #ffd56a;
  --sun-500: #f5b927;
  --blue-400: #6fa5dd;
  --blue-600: #3978b9;
  --orange-400: #f5a05e;
  --text-main: #30343b;
  --text-soft: #68707b;

  --color-primary: #f58220;
  --color-primary-dark: #e86e00;
  --color-primary-light: #ff9a3c;
  --color-secondary: #2b78e4;
  --color-secondary-dark: #1e5fb8;
  --color-bg: var(--cream-50);
  --color-bg-accent: var(--cream-100);
  --color-text: var(--text-main);
  --color-muted: var(--text-soft);
  --color-success: #4caf50;

  /* Default page gradient stops (C-tier ops) */
  --page-bg-start: #fffdf9;
  --page-bg-middle: #fffaf0;
  --page-bg-end: #f7faff;
  --page-glow-a: rgba(255, 208, 92, 0.18);
  --page-glow-b: rgba(104, 164, 255, 0.12);
  --page-decor-opacity: 0.06;

  /* Glass — translucent frosted panels (visible blur over gradients/scene) */
  --glass-radius: 20px;
  --glass-fill: rgba(255, 252, 248, 0.18);
  --glass-gradient: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.42) 0%,
    rgba(255, 255, 255, 0.12) 48%,
    rgba(255, 250, 245, 0.08) 100%
  );
  --glass-border-color: rgba(255, 255, 255, 0.62);
  --glass-border: 1.3px solid var(--glass-border-color);
  --glass-backdrop: blur(18px) saturate(1.35) brightness(1.08);
  --glass-shadow:
    0 18px 48px rgba(62, 36, 18, 0.16),
    0 4px 14px rgba(62, 36, 18, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.78),
    inset 1px 0 0 rgba(255, 255, 255, 0.4),
    inset 0 -1px 0 rgba(255, 255, 255, 0.14),
    inset -1px 0 0 rgba(255, 255, 255, 0.1);
  --color-surface: var(--glass-fill);
  --color-surface-glass: var(--glass-fill);

  --font-size-base: 18px;
  --font-size-lg: 20px;
  --font-size-prompt: 26px;
  --font-size-hero: 30px;
  --radius-card: 24px;
  --radius-btn: 18px;
  --btn-min-height: 56px;
  --shadow-soft: var(--glass-shadow);
  --shadow-card: 0 18px 40px rgba(102, 76, 37, 0.12);
  --shadow-btn: 0 5px 0 rgba(0, 0, 0, 0.12);
  --inner-bg-dim: 1;
  --inner-bg-blur: 0px;
}

/* B-tier: explore / reward — more open glass */
.site-bg-tier--explore,
.site-body--ability-map,
.site-body--achievements {
  --glass-fill: rgba(255, 252, 248, 0.14);
  --glass-gradient: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.38) 0%,
    rgba(255, 255, 255, 0.1) 50%,
    rgba(255, 250, 245, 0.06) 100%
  );
  --glass-backdrop: blur(20px) saturate(1.4) brightness(1.1);
  --page-decor-opacity: 0.1;
}

/* C-tier: ops / data — still glassy, slightly denser for reading */
.site-bg-tier--ops,
.site-body--practice,
.site-body--learning,
.site-body--grades,
.site-body--parent {
  --glass-fill: rgba(255, 252, 248, 0.28);
  --glass-gradient: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.4) 0%,
    rgba(255, 255, 255, 0.14) 52%,
    rgba(255, 250, 245, 0.1) 100%
  );
  --glass-backdrop: blur(16px) saturate(1.3) brightness(1.06);
  --page-decor-opacity: 0.05;
}

/* Home scene: glass over illustration */
.site-body--home {
  --glass-fill: rgba(255, 252, 248, 0.2);
  --glass-gradient: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.45) 0%,
    rgba(255, 255, 255, 0.12) 55%,
    rgba(255, 250, 245, 0.08) 100%
  );
  --glass-backdrop: blur(18px) saturate(1.35) brightness(1.08);
}