/* ==========================================================================
   Design Tokens — Premium & Trustworthy
   ========================================================================== */
:root {
  /* ---- Brand palette (derived from the SCS logo) ----
     Indigo = backbone · Green = functional accent (icons/links/growth)
     Red    = action accent (CTAs, highlights) — reuses the --gold-* slots  */
  --color-navy: #2e2e78;       /* logo indigo */
  --color-navy-deep: #21215c;
  --color-navy-900: #16163c;
  --color-gold: #d8301a;       /* logo red — primary action accent */
  --color-gold-soft: #f2705a;  /* light coral-red for text on dark / hovers */
  --color-gold-dark: #a8210e;  /* deep red for accents on light bg */
  --color-teal: #0e8a3a;       /* logo green — functional accent */
  --color-teal-soft: #16a34a;
  --color-cream: #f4f5fb;      /* cool off-white to pair with indigo */
  --color-cream-dark: #e9ebf6;
  --color-white: #ffffff;

  /* ---- Neutrals ---- */
  --color-ink: #14182e;
  --color-slate: #4a4f66;
  --color-slate-light: #6b7190;
  --color-border: #dde1ef;
  --color-border-dark: rgba(255, 255, 255, 0.14);

  /* ---- Semantic ---- */
  --bg-body: var(--color-cream);
  --bg-surface: var(--color-white);
  --bg-dark: var(--color-navy);
  --text-strong: var(--color-navy-deep);
  --text-body: var(--color-slate);
  --text-invert: rgba(255, 255, 255, 0.92);
  --text-invert-dim: rgba(255, 255, 255, 0.66);

  /* ---- Gradients ---- */
  --grad-navy: linear-gradient(135deg, #2e2e78 0%, #21215c 60%, #16163c 100%);
  --grad-gold: linear-gradient(135deg, #f2705a 0%, #d8301a 55%, #a8210e 100%);
  --grad-hero-overlay: linear-gradient(
    105deg,
    rgba(15, 15, 48, 0.55) 0%,
    rgba(15, 15, 48, 0.22) 46%,
    rgba(15, 15, 48, 0) 76%
  );
  --grad-teal: linear-gradient(135deg, #16a34a 0%, #0e8a3a 100%);

  /* ---- Typography ---- */
  --font-en-head: "Playfair Display", "Noto Serif Kannada", Georgia, serif;
  --font-en-body: "Inter", "Noto Sans Kannada", system-ui, -apple-system, sans-serif;
  --font-kn-head: "Noto Serif Kannada", "Playfair Display", Georgia, serif;
  --font-kn-body: "Noto Sans Kannada", "Inter", system-ui, sans-serif;

  /* Default (overridden per lang below) */
  --font-head: var(--font-en-head);
  --font-body: var(--font-en-body);

  --fs-xs: clamp(0.75rem, 0.72rem + 0.15vw, 0.82rem);
  --fs-sm: clamp(0.85rem, 0.82rem + 0.2vw, 0.94rem);
  --fs-base: clamp(1rem, 0.96rem + 0.25vw, 1.08rem);
  --fs-md: clamp(1.15rem, 1.08rem + 0.4vw, 1.3rem);
  --fs-lg: clamp(1.4rem, 1.25rem + 0.8vw, 1.75rem);
  --fs-xl: clamp(1.9rem, 1.55rem + 1.7vw, 2.75rem);
  --fs-2xl: clamp(2.4rem, 1.85rem + 2.8vw, 4rem);
  --fs-3xl: clamp(3rem, 2.1rem + 4.4vw, 5.5rem);

  --lh-tight: 1.12;
  --tracking-wide: 0.14em;
  --tracking-wider: 0.24em;

  /* ---- Spacing scale ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;
  --section-y: clamp(4rem, 3rem + 6vw, 8rem);

  /* ---- Layout ---- */
  --container: 1240px;
  --container-narrow: 900px;
  --gutter: clamp(1.25rem, 0.8rem + 2.5vw, 3rem);

  /* ---- Radii ---- */
  --radius-sm: 8px;
  --radius: 16px;
  --radius-lg: 24px;
  --radius-xl: 34px;
  --radius-pill: 999px;

  /* ---- Shadows ---- */
  --shadow-xs: 0 1px 2px rgba(22, 22, 60, 0.06);
  --shadow-sm: 0 4px 14px rgba(22, 22, 60, 0.08);
  --shadow: 0 14px 40px rgba(22, 22, 60, 0.12);
  --shadow-lg: 0 30px 70px rgba(22, 22, 60, 0.22);
  --shadow-gold: 0 16px 40px rgba(216, 48, 26, 0.3);
  --glass-border: 1px solid rgba(255, 255, 255, 0.22);
  --glass-bg: rgba(255, 255, 255, 0.1);

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 0.25s;
  --dur: 0.45s;
  --dur-slow: 0.8s;

  --header-h: 84px;
}

/* Language-specific font families */
html[lang="kn"] {
  --font-head: var(--font-kn-head);
  --font-body: var(--font-kn-body);
}

html[lang="en"] {
  --font-head: var(--font-en-head);
  --font-body: var(--font-en-body);
}