/* ============================================================
   Jeevika Saathi+ — Design tokens + safety-net utilities
   (Mirrors the React version, with explicit fallback utilities
    so nothing depends on Tailwind opacity-modifier resolution
    for CSS-variable colours.)
   ============================================================ */
:root {
  --radius: 0.875rem;

  /* BharatCares teal */
  --primary: oklch(0.48 0.09 195);
  --primary-foreground: oklch(0.99 0 0);
  --primary-soft: oklch(0.95 0.03 195);

  /* Xiaomi orange */
  --accent: oklch(0.71 0.19 45);
  --accent-foreground: oklch(0.99 0 0);
  --accent-soft: oklch(0.96 0.04 60);

  --cream: oklch(0.985 0.012 75);
  --background: oklch(1 0 0);
  --foreground: oklch(0.18 0.02 220);
  --ink: oklch(0.16 0.02 220);

  --card: oklch(1 0 0);
  --secondary: oklch(0.96 0.01 220);
  --muted: oklch(0.965 0.008 220);
  --muted-foreground: oklch(0.48 0.02 220);

  --destructive: oklch(0.6 0.22 27);

  --border: oklch(0.92 0.01 220);

  --shadow-soft: 0 6px 24px -8px color-mix(in oklab, var(--primary) 18%, transparent);
  --shadow-warm: 0 14px 40px -12px color-mix(in oklab, var(--accent) 30%, transparent);
  --shadow-card: 0 1px 3px rgba(15,23,42,0.04), 0 8px 24px -12px rgba(15,23,42,0.08);

  --gradient-hero: linear-gradient(135deg, var(--primary) 0%, color-mix(in oklab, var(--primary) 70%, var(--accent)) 100%);
  --gradient-warm: linear-gradient(135deg, var(--accent) 0%, color-mix(in oklab, var(--accent) 60%, #ffb47a) 100%);
  --gradient-soft: linear-gradient(180deg, var(--cream) 0%, #ffffff 100%);
}

* { border-color: var(--border); box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background-color: var(--background);
  color: var(--foreground);
  font-family: 'Inter', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  margin: 0;
}
.font-display { font-family: 'Plus Jakarta Sans', system-ui, sans-serif; }
h1, h2, h3, h4 { font-family: 'Plus Jakarta Sans', system-ui, sans-serif; letter-spacing: -0.02em; }

.container-page {
  margin-inline: auto;
  width: 100%;
  max-width: 1200px;
  padding-inline: 1.25rem;
}
@media (min-width: 768px) {
  .container-page { padding-inline: 2rem; }
}

/* ============================================================
   Safety-net utilities — guarantee these resolve regardless of
   how the Tailwind CDN handles arbitrary CSS-var opacity.
   ============================================================ */

/* Gradients */
.bg-gradient-hero { background-image: var(--gradient-hero) !important; }
.bg-gradient-warm { background-image: var(--gradient-warm) !important; }
.bg-gradient-soft { background-image: var(--gradient-soft) !important; }

/* Solid token backgrounds */
.bg-cream         { background-color: var(--cream) !important; }
.bg-primary       { background-color: var(--primary) !important; }
.bg-primary-soft  { background-color: var(--primary-soft) !important; }
.bg-accent        { background-color: var(--accent) !important; }
.bg-accent-soft   { background-color: var(--accent-soft) !important; }
.bg-secondary     { background-color: var(--secondary) !important; }
.bg-background    { background-color: var(--background) !important; }
.bg-foreground    { background-color: var(--foreground) !important; }
.bg-muted         { background-color: var(--muted) !important; }
.bg-destructive   { background-color: var(--destructive) !important; }
.bg-ink           { background-color: var(--ink) !important; }

/* Text colours */
.text-primary             { color: var(--primary) !important; }
.text-primary-foreground  { color: var(--primary-foreground) !important; }
.text-accent              { color: var(--accent) !important; }
.text-accent-foreground   { color: var(--accent-foreground) !important; }
.text-accent-soft         { color: var(--accent-soft) !important; }
.text-foreground          { color: var(--foreground) !important; }
.text-muted-foreground    { color: var(--muted-foreground) !important; }
.text-destructive         { color: var(--destructive) !important; }

/* Borders */
.border-border          { border-color: var(--border) !important; }
.border-primary         { border-color: var(--primary) !important; }
.border-accent          { border-color: var(--accent) !important; }

/* Shadows */
.shadow-soft { box-shadow: var(--shadow-soft) !important; }
.shadow-warm { box-shadow: var(--shadow-warm) !important; }
.shadow-card { box-shadow: var(--shadow-card) !important; }

/* Opacity-modifier fallbacks using color-mix (the patterns we actually use) */
.bg-primary\/15        { background-color: color-mix(in oklab, var(--primary) 15%, transparent) !important; }
.bg-primary\/10        { background-color: color-mix(in oklab, var(--primary) 10%, transparent) !important; }
.bg-primary\/40        { background-color: color-mix(in oklab, var(--primary) 40%, transparent) !important; }
.bg-accent\/15         { background-color: color-mix(in oklab, var(--accent) 15%, transparent) !important; }
.bg-accent\/20         { background-color: color-mix(in oklab, var(--accent) 20%, transparent) !important; }
.bg-accent\/30         { background-color: color-mix(in oklab, var(--accent) 30%, transparent) !important; }
.bg-primary-soft\/40   { background-color: color-mix(in oklab, var(--primary-soft) 40%, transparent) !important; }
.bg-primary-soft\/50   { background-color: color-mix(in oklab, var(--primary-soft) 50%, transparent) !important; }
.bg-accent-soft\/40    { background-color: color-mix(in oklab, var(--accent-soft) 40%, transparent) !important; }
.bg-secondary\/40      { background-color: color-mix(in oklab, var(--secondary) 40%, transparent) !important; }
.bg-secondary\/60      { background-color: color-mix(in oklab, var(--secondary) 60%, transparent) !important; }
.bg-background\/85     { background-color: color-mix(in oklab, var(--background) 85%, transparent) !important; }
.border-border\/60     { border-color: color-mix(in oklab, var(--border) 60%, transparent) !important; }
.border-accent\/30     { border-color: color-mix(in oklab, var(--accent) 30%, transparent) !important; }
.border-primary\/40    { border-color: color-mix(in oklab, var(--primary) 40%, transparent) !important; }
.border-primary\/50    { border-color: color-mix(in oklab, var(--primary) 50%, transparent) !important; }
.text-primary-foreground\/80  { color: color-mix(in oklab, var(--primary-foreground) 80%, transparent) !important; }
.text-primary-foreground\/85  { color: color-mix(in oklab, var(--primary-foreground) 85%, transparent) !important; }
.text-primary-foreground\/90  { color: color-mix(in oklab, var(--primary-foreground) 90%, transparent) !important; }
.text-accent-foreground\/85   { color: color-mix(in oklab, var(--accent-foreground) 85%, transparent) !important; }
.text-foreground\/70   { color: color-mix(in oklab, var(--foreground) 70%, transparent) !important; }
.text-foreground\/80   { color: color-mix(in oklab, var(--foreground) 80%, transparent) !important; }
.text-foreground\/90   { color: color-mix(in oklab, var(--foreground) 90%, transparent) !important; }
.text-muted-foreground\/40  { color: color-mix(in oklab, var(--muted-foreground) 40%, transparent) !important; }

/* From/to gradient stops used in the hero overlay & progress bar */
.from-primary\/40 { --tw-gradient-from: color-mix(in oklab, var(--primary) 40%, transparent); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, transparent); }
.from-ink\/85     { --tw-gradient-from: color-mix(in oklab, var(--ink) 85%, transparent); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-via, transparent), var(--tw-gradient-to, transparent); }
.from-ink\/80     { --tw-gradient-from: color-mix(in oklab, var(--ink) 80%, transparent); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-via, transparent), var(--tw-gradient-to, transparent); }
.via-ink\/20      { --tw-gradient-via: color-mix(in oklab, var(--ink) 20%, transparent); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-via), var(--tw-gradient-to, transparent); }
.via-ink\/10      { --tw-gradient-via: color-mix(in oklab, var(--ink) 10%, transparent); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-via), var(--tw-gradient-to, transparent); }
.to-transparent   { --tw-gradient-to: transparent; }
.from-primary     { --tw-gradient-from: var(--primary); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, transparent); }
.to-accent        { --tw-gradient-to: var(--accent); }

/* Hover variants (Tailwind's hover: prefix) for our utilities — CDN handles
   most, but ensure these specific ones cascade. */
.hover\:bg-secondary:hover { background-color: var(--secondary); }
.hover\:bg-secondary\/40:hover { background-color: color-mix(in oklab, var(--secondary) 40%, transparent); }
.hover\:bg-secondary\/60:hover { background-color: color-mix(in oklab, var(--secondary) 60%, transparent); }
.hover\:bg-primary-soft\/40:hover { background-color: color-mix(in oklab, var(--primary-soft) 40%, transparent); }
.hover\:bg-white\/15:hover { background-color: rgba(255,255,255,0.15); }
.hover\:text-primary:hover { color: var(--primary); }
.hover\:text-foreground:hover { color: var(--foreground); }
.hover\:border-primary:hover { border-color: var(--primary); }
.hover\:border-primary\/50:hover { border-color: color-mix(in oklab, var(--primary) 50%, transparent); }
.hover\:border-primary\/40:hover { border-color: color-mix(in oklab, var(--primary) 40%, transparent); }

.group:hover .group-hover\:bg-primary { background-color: var(--primary); }
.group:hover .group-hover\:text-primary { color: var(--primary); }
.group:hover .group-hover\:text-primary-foreground { color: var(--primary-foreground); }

/* Lucide icon default sizing */
[data-lucide] { width: 1em; height: 1em; stroke-width: 2; }

/* Animated scroll fade */
.fade-up { opacity: 0; transform: translateY(12px); transition: opacity .6s ease, transform .6s ease; }
.fade-up.in { opacity: 1; transform: none; }