:root {
  /* ── Colors ── */
  --saffron: #E8AF38;
  --saffron-pale: #FFF9EE;
  --ink: #0A0A0A;
  --paper: #FAFAFA;
  --warm-bg: #F5F4F0;
  --mid: #888;
  --faint: #CCC;
  --rule: #E8E8E8;

  /* ── Spacing ── */
  --section-pad: 80px;
  --section-pad-mobile: 48px;
  --content-pad: 48px;
  --content-pad-mobile: 24px;
  --max-width: 1200px;

  /* ── Type scale ── */
  --hero-size: 4.8rem;
  --hero-size-mobile: 2.4rem;
  --h2-size: 2.8rem;
  --h2-size-mobile: 1.8rem;
  --body-size: 1.05rem;
  --small-size: 0.95rem;
  --tag-size: 0.6rem;
  --button-size: 0.78rem;

  /* ── Warm background stops ── */
  --warm-cream: #FBF8F3;
  --warm-linen: #F5F0E8;
  --warm-sand: #EDE6D8;

  /* ── Section background alternation ── */
  --section-light: var(--warm-cream);
  --section-warm: var(--warm-linen);

  /* ── Depth & shadow ── */
  --shadow-soft: 0 4px 24px rgba(10, 10, 10, 0.06);
  --shadow-card: 0 8px 32px rgba(10, 10, 10, 0.08);
  --shadow-elevated: 0 16px 48px rgba(10, 10, 10, 0.12);
  --shadow-saffron-glow: 0 8px 32px rgba(232, 175, 56, 0.15);

  /* ── Element family colors ── */
  --elem-nonmetal: #5B8C5A;
  --elem-noble-gas: #7B68AE;
  --elem-alkali: #D4654A;
  --elem-transition: #4A7FB5;
  --elem-metalloid: #8B7355;

  /* ── Program colors ── */
  --prog-atlas: #2D7A8A;
  --prog-elementum: var(--saffron);
  --prog-reading: #8B6B5A;
  --prog-handson: #C4714A;
  --prog-mystery: #6B5B8A;

  /* ── Animation timing ── */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast: 200ms;
  --duration-normal: 400ms;
  --duration-slow: 700ms;
  --duration-reveal: 900ms;

  /* ── Texture ── */
  --grain-opacity: 0.03;
  --noise-url: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
}