/* ─── Icon settings ──────────────────────────────────── */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
.fill-icon {
  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* ─── Ambient Depth & Shadow ─────────────────────────── */
/* Refined to: 40px blur, 6% opacity, on-surface (#0b1c30) tint */
.editorial-shadow {
  box-shadow: 0 40px 40px -20px rgba(11, 28, 48, 0.06);
}

/* Signature CTA Gradient: primary (#000000) to primary-container (#131b2e) at 135deg */
.primary-gradient {
  background: linear-gradient(135deg, #000000 0%, #131b2e 100%);
}

/* Glassmorphism: surface-variant (#d3e4fe) @ 60% with 20px blur */
.glass-nav {
  background-color: rgba(211, 228, 254, 0.60);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

/* ─── Typography: Editorial Scale ────────────────────── */
.display-lg {
  font-size: 3.5rem;
  letter-spacing: -0.02em;
  line-height: 1.05;
}
@media (min-width: 768px)  { .display-lg { font-size: 5rem; } }
@media (min-width: 1024px) { .display-lg { font-size: 6.5rem; } }

/* ─── No underline helper ────────────────────────────── */
.no-underline { text-decoration: none; }

/* ═══════════════════════════════════════════════════════
   CUSTOM COLOUR UTILITIES
   (replaces tailwind.config – CDN only handles layout)
   ═══════════════════════════════════════════════════════ */

/* Background ------------------------------------------ */
.bg-background                    { background-color: #f8f9ff; }
.bg-surface-container-lowest      { background-color: #ffffff; }
.bg-surface-container-low         { background-color: #eff4ff; }
.bg-surface-container             { background-color: #e5eeff; }
.bg-surface-container-high        { background-color: #dce9ff; }
.bg-surface-container-highest     { background-color: #d3e4fe; }
.bg-primary                       { background-color: #000000; }
.bg-primary-container             { background-color: #131b2e; }
.bg-on-primary                    { background-color: #ffffff; }
.bg-secondary-container           { background-color: #d5e3fd; }

/* Background + opacity */
.bg-on-surface\/6                 { background-color: rgba(11,  28,  48,  0.06); }
.bg-on-surface\/10                { background-color: rgba(11,  28,  48,  0.10); }
.bg-surface-container\/60         { background-color: rgba(229, 238, 255, 0.60); }
.bg-surface-container-highest\/50 { background-color: rgba(211, 228, 254, 0.50); }

/* Text ------------------------------------------------ */
.text-on-surface                  { color: #0b1c30; }
.text-on-surface-variant          { color: #45464d; }
.text-primary                     { color: #000000; }
.text-primary-container           { color: #131b2e; }
.text-on-primary                  { color: #ffffff; }
.text-on-primary-container        { color: #7c839b; }
.text-primary-fixed-dim           { color: #bec6e0; }
.text-on-secondary-container      { color: #57657b; }
.text-on-tertiary-container       { color: #008cc7; }
.text-outline-variant             { color: #c6c6cd; }
.text-outline                     { color: #76777d; }

/* Text + opacity */
.text-on-primary\/60              { color: rgba(255, 255, 255, 0.60); }
.text-on-surface-variant\/40      { color: rgba(69,  70,  77,  0.40); }
.text-outline-variant\/30         { color: rgba(198, 198, 205, 0.30); }
.text-outline-variant\/40         { color: rgba(198, 198, 205, 0.40); }

/* Border --------------------------------------------- */
.border-primary                   { border-color: #000000; }
.border-outline-variant           { border-color: #c6c6cd; }
.border-on-surface                { border-color: #0b1c30; }
.border-on-tertiary-container     { border-color: #008cc7; }

/* Border + opacity */
.border-outline-variant\/10       { border-color: rgba(198, 198, 205, 0.10); }
.border-outline-variant\/15       { border-color: rgba(198, 198, 205, 0.15); }
.border-outline-variant\/20       { border-color: rgba(198, 198, 205, 0.20); }

/* Text decoration ------------------------------------ */
.decoration-outline-variant\/30   { text-decoration-color: rgba(198, 198, 205, 0.30); }

/* Divide --------------------------------------------- */
.divide-outline-variant\/20 > * + * { border-color: rgba(198, 198, 205, 0.20); }
.divide-outline-variant\/10 > * + * { border-color: rgba(198, 198, 205, 0.10); }

/* Gradient ------------------------------------------- */
.from-surface-container-high\/80 {
  --tw-gradient-from: rgba(220, 233, 255, 0.80);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(220, 233, 255, 0));
}

/* Hover variants ------------------------------------- */
.hover\:bg-surface-container-low:hover       { background-color: #eff4ff; }
.hover\:bg-surface-container-high:hover      { background-color: #dce9ff; }
.hover\:text-primary:hover                   { color: #000000; }
.hover\:text-on-surface:hover                { color: #0b1c30; }
.hover\:text-on-surface-variant:hover        { color: #45464d; }
.hover\:text-on-tertiary-container:hover     { color: #008cc7; }
.hover\:border-on-tertiary-container:hover   { border-color: #008cc7; }

/* Group-hover variants ------------------------------- */
.group:hover .group-hover\:text-primary      { color: #000000; }