: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: var(--color-gopsco-blue);
  --color-accent-2: var(--color-gopsco-mid);
  --color-ink-0: #071825;
  --color-ink-1: #0b2231;

  /* Surfaces */
  --surface-0: var(--color-mist);
  --surface-1: rgba(255, 255, 255, 0.92);
  --surface-2: rgba(255, 255, 255, 0.78);
  --surface-3: rgba(255, 255, 255, 0.66);
  --surface-ink: linear-gradient(180deg, rgba(7, 24, 37, 0.96), rgba(11, 34, 49, 0.94));

  /* Text */
  --text-strong: rgba(0, 46, 63, 0.94);
  --text: rgba(0, 46, 63, 0.78);
  --text-muted: rgba(0, 46, 63, 0.62);
  --text-on-ink: rgba(255, 255, 255, 0.88);
  --text-on-ink-muted: rgba(255, 255, 255, 0.72);

  /* Stroke */
  --stroke-1: rgba(0, 46, 63, 0.12);
  --stroke-2: rgba(0, 46, 63, 0.18);
  --focus-ring: 0 0 0 4px rgba(0, 139, 191, 0.18);

  /* 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 18px 55px rgba(0, 46, 63, 0.18);
  --shadow-card: 0 14px 44px rgba(0, 46, 63, 0.14);
  --shadow-float: 0 24px 80px rgba(0, 46, 63, 0.24);

  /* Premium accents */
  --glow-blue: rgba(0, 139, 191, 0.35);
  --glow-mid: rgba(0, 92, 126, 0.28);
  --glow-gold: rgba(212, 175, 55, 0.28);
  --gradient-accent: linear-gradient(135deg, rgba(0, 139, 191, 0.95), rgba(0, 92, 126, 0.95));
  --gradient-aurora: radial-gradient(900px 500px at 20% 15%, rgba(0, 139, 191, 0.22), transparent 60%),
    radial-gradient(760px 520px at 85% 20%, rgba(0, 92, 126, 0.18), transparent 62%),
    radial-gradient(900px 620px at 55% 95%, rgba(212, 175, 55, 0.10), transparent 65%);
}