:root {
  /* Base identity */
  --white: #ffffff;
  --bg: #ffffff;
  --bg-root: #e9ecf2;
  --ink: #101010;
  --gray: #5a5e56;
  --soft: #f3f5f8;
  --line: #eaecef;
  --pill: #eef1f6;

  /* ESC blue */
  --blue: #2457ff;
  --blue-soft: #dce6ff;
  --blue-ink: #0d2266;
  --blue-hover: #1a45db;
  --blue-dim-16: rgba(36, 87, 255, 0.16);
  --blue-dim-25: rgba(36, 87, 255, 0.25);
  --blue-dim-28: rgba(36, 87, 255, 0.28);
  --blue-dim-35: rgba(36, 87, 255, 0.35);
  --blue-dim-70: rgba(36, 87, 255, 0.7);

  /* TEDx red */
  --red: #eb0028;
  --red-soft: #ffe0e5;
  --red-ink: #5c0010;
  --red-hover: #c80022;
  --red-dim-14: rgba(235, 0, 40, 0.14);
  --red-dim-15: rgba(235, 0, 40, 0.15);
  --red-dim-22: rgba(235, 0, 40, 0.22);
  --red-dim-35: rgba(235, 0, 40, 0.35);
  --red-dim-70: rgba(235, 0, 40, 0.7);

  /* Ink / dark tints */
  --ink-hover: #2b2b2b;
  --ink-deep: #1d2230;
  --dark-overlay: rgba(10, 12, 18, 0.45);
  --dark-scene-a: rgba(8, 10, 16, 0.58);
  --dark-scene-b: rgba(8, 10, 16, 0.42);
  --dark-scene-c: rgba(8, 10, 16, 0.68);
  --dark-card: rgba(12, 18, 36, 0.86);
  --dark-card-tedx: rgba(32, 12, 18, 0.86);
  --dark-bar: rgba(16, 20, 32, 0.88);

  /* White / glass tints */
  --white-10: rgba(255, 255, 255, 0.1);
  --white-18: rgba(255, 255, 255, 0.18);
  --white-22: rgba(255, 255, 255, 0.22);
  --white-25: rgba(255, 255, 255, 0.25);
  --white-3: rgba(255, 255, 255, 0.3);
  --white-42: rgba(255, 255, 255, 0.42);
  --white-45: rgba(255, 255, 255, 0.45);
  --white-55: rgba(255, 255, 255, 0.55);
  --white-58: rgba(255, 255, 255, 0.58);
  --white-68: rgba(255, 255, 255, 0.68);
  --white-72: rgba(255, 255, 255, 0.72);
  --white-78: rgba(255, 255, 255, 0.78);
  --white-82: rgba(255, 255, 255, 0.82);
  --white-85: rgba(255, 255, 255, 0.85);
  --white-86: rgba(255, 255, 255, 0.86);
  --white-88: rgba(255, 255, 255, 0.88);
  --white-9: rgba(255, 255, 255, 0.9);
  --white-92: rgba(255, 255, 255, 0.92);
  --white-95: rgba(255, 255, 255, 0.95);
  --white-96: rgba(255, 255, 255, 0.96);
  --white-98: rgba(255, 255, 255, 0.98);

  /* Black tints */
  --black-6: rgba(0, 0, 0, 0.06);
  --black-7: rgba(0, 0, 0, 0.07);
  --black-8: rgba(0, 0, 0, 0.08);
  --black-9: rgba(0, 0, 0, 0.09);
  --black-14: rgba(16, 16, 16, 0.14);
  --black-16: rgba(16, 16, 16, 0.16);
  --black-25: rgba(16, 16, 16, 0.25);
  --black-6b: rgba(0, 0, 0, 0.06);
  --black-60: rgba(0, 0, 0, 0.6);
  --black-70: rgba(0, 0, 0, 0.7);
  --shadow-sm: rgba(10, 20, 50, 0.18);
  --shadow-scene: rgba(0, 0, 0, 0.4);
  --shadow-scene-35: rgba(0, 0, 0, 0.35);

  /* ESC season tints */
  --season-tint-esc: rgba(235, 241, 255, 0.65);
  --season-border-esc: rgba(36, 87, 255, 0.14);
  --season-shadow-esc: rgba(36, 87, 255, 0.05);

  /* TEDx season tints */
  --season-tint-tedx: rgba(255, 240, 243, 0.55);
  --season-border-tedx: rgba(235, 0, 40, 0.14);
  --season-shadow-tedx: rgba(235, 0, 40, 0.05);

  /* Typography */
  --font-body: 'Be Vietnam Pro', system-ui, -apple-system, sans-serif;

  /* Layout */
  --radius: 22px;
  --gutter: clamp(20px, 4.2vw, 72px);

  /* Motion */
  --motion-fast: 180ms;
  --motion-reveal: 650ms;
  --motion-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

:root[data-theme="dark"] {
  --white: #101010;
  --bg: #101010;
  --ink: #fafafa;
  --gray: #a6aab2;
  --soft: #1a1c20;
  --line: #2a2d34;
  --pill: #22252b;
  --blue: #4d78ff;
  --blue-soft: #172654;
  --blue-ink: #dbe6ff;
  --red: #eb0028;
  --red-soft: #4a0d18;
  --red-ink: #ffdbe1;
}