:root {
  /* Canonical palette (see `3-jnana-knowledge/assets/colors/canonical-colors.md`) */
  --color-gopsco-blue: #008bbf;
  --color-gopsco-mid: #005c7e;
  --color-gopsco-deep: #002e3f;
  --color-gopsco-dark: #002e3f;

  /* Accents (use sparingly on marketing surfaces) */
  --color-shakthi-red: #d32f2f;
  --color-temple-gold: #d4af37;

  /* Neutrals (canonical + web-safe background) */
  --color-matterhorn: #4b5563;
  --color-quartz: #7d7e7f;
  --color-mist: #f4f6f8;
  --color-grey: #d1d5db;
  --color-white: #ffffff;

  /* Derived UI tokens */
  --color-accent: #0097c9;
  --color-accent-2: #006691;
  --color-ink-0: #061a28;
  --color-ink-1: #0b2a3f;

  /* Surfaces */
  --surface-0: #eef5fa;
  --surface-1: rgba(255, 255, 255, 0.97);
  --surface-2: rgba(255, 255, 255, 0.9);
  --surface-3: rgba(255, 255, 255, 0.78);
  --surface-ink: linear-gradient(180deg, rgba(6, 26, 40, 0.97), rgba(11, 42, 63, 0.95));

  /* Text */
  --text-strong: rgba(6, 41, 61, 0.97);
  --text: rgba(6, 41, 61, 0.88);
  --text-muted: rgba(6, 41, 61, 0.74);
  --text-on-ink: rgba(255, 255, 255, 0.92);
  --text-on-ink-muted: rgba(255, 255, 255, 0.8);

  /* Stroke */
  --stroke-1: rgba(6, 41, 61, 0.14);
  --stroke-2: rgba(6, 41, 61, 0.22);
  --focus-ring: 0 0 0 4px rgba(0, 151, 201, 0.2);

  /* Radius + spacing rhythm */
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --radius-xl: 24px;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 2.75rem;
  --space-8: 3.5rem;

  /* Shadows */
  --shadow-soft: 0 22px 62px rgba(3, 29, 44, 0.2);
  --shadow-card: 0 16px 50px rgba(3, 29, 44, 0.17);
  --shadow-float: 0 30px 95px rgba(3, 29, 44, 0.26);

  /* Premium accents */
  --glow-blue: rgba(0, 151, 201, 0.38);
  --glow-mid: rgba(0, 102, 145, 0.28);
  --glow-gold: rgba(212, 175, 55, 0.26);
  --gradient-accent: linear-gradient(132deg, rgba(0, 151, 201, 0.98), rgba(0, 102, 145, 0.97));
  --gradient-aurora:
    radial-gradient(1200px 760px at -5% -15%, rgba(0, 151, 201, 0.26), transparent 58%),
    radial-gradient(1100px 640px at 108% 0%, rgba(0, 102, 145, 0.2), transparent 60%),
    radial-gradient(760px 600px at 48% 112%, rgba(212, 175, 55, 0.12), transparent 72%);
}