/* =====================================================================
   Design tokens - Jain Vadhu-Var portal
   Source of truth: the design system extracted from the live site (dtcg_Woblo_tokens.json,
   tailwind-v4 / shadcn / design-system exports). Hex values are copied from that file.
   Layers:  1. raw palette   2. scale (space, radius, shadow, type)   3. semantic roles   4. Bootstrap bridge
   Components (site.css, admin.css) use the semantic roles, never raw hex values.
   ===================================================================== */
:root {
  /* ---------- 1. raw palette ---------- */
  /* brand: maroon (primary) */
  --brand-50: #ffede7;
  --brand-100: #ffdfd7;
  --brand-200: #ffccc1;
  --brand-300: #ffa999;
  --brand-400: #f28979;
  --brand-500: #d16353;
  --brand-600: #a74639;
  --brand-700: #861c12;
  --brand-800: #5e130c;
  --brand-900: #3c0000;
  --brand-950: #1d0000;
  /* bronze (secondary) */
  --bronze-50: #ffefd5;
  --bronze-100: #ffe2be;
  --bronze-200: #ffd09c;
  --bronze-300: #ffb067;
  --bronze-400: #e09957;
  --bronze-500: #bf7527;
  --bronze-600: #985703;
  --bronze-700: #753c00;
  --bronze-800: #532400;
  --bronze-900: #311000;
  --bronze-950: #140200;
  /* saffron (accent) */
  --saffron-50: #ffede0;
  --saffron-100: #ffe0ce;
  --saffron-200: #ffceb4;
  --saffron-300: #ffac84;
  --saffron-400: #ff8045;
  --saffron-500: #e85d04;
  --saffron-600: #b53900;
  --saffron-700: #8b2300;
  --saffron-800: #611100;
  --saffron-900: #3a0300;
  --saffron-950: #1a0000;
  /* warm neutrals */
  --neutral-50: #fef3ea;
  --neutral-100: #f5e9df;
  --neutral-200: #e9dbd1;
  --neutral-300: #d3c4b9;
  --neutral-400: #b7a79b;
  --neutral-500: #968679;
  --neutral-600: #74665b;
  --neutral-700: #574a41;
  --neutral-800: #3b3028;
  --neutral-900: #211912;
  --neutral-950: #0c0603;
  /* tertiary */
  --oxblood: #4a0f0a;
  --ember: #ff8a3d;
  --sienna: #a0522d;
  /* logo gold (stroke colour of /img/logo.svg) */
  --gold: #e8a838;
  /* status colours (design-system export) */
  --success: #198754;
  --warning: #ffc107;
  --danger: #dc3545;

  /* ---------- 2. scale ---------- */
  /* spacing (design-system steps 3 4 6 8 10 12 14 24 38 = 6 8 12 16 20 24 28 48 76 px) */
  --space-1: 0.375rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-7: 1.75rem;
  --space-8: 3rem;
  --space-9: 4.75rem;

  /* radius: lg 10 / xl 12 / 2xl 16 + pill */
  --radius-lg: 0.625rem;
  --radius-xl: 0.75rem;
  --radius-2xl: 1rem;
  --radius-pill: 999px;

  /* shadows (design-system xs / lg / xl / 2xl) */
  --shadow-ring: 0 0 0 6px rgba(134, 28, 18, 0.12);
  --shadow-sm: 0 2px 14px 0 rgba(70, 25, 19, 0.06);
  --shadow-md: 0 5px 18px 0 rgba(70, 25, 19, 0.07);
  --shadow-lg: 0 8px 28px 0 rgba(70, 25, 19, 0.12);
  --shadow-pop: 0 18px 50px 0 rgba(0, 0, 0, 0.35);

  /* gradients (design-system export) */
  --gradient-cream: linear-gradient(rgb(255, 253, 251), rgb(255, 248, 241));
  --gradient-gold: linear-gradient(135deg, rgb(255, 247, 224), rgb(255, 233, 181));
  --gradient-rose: linear-gradient(135deg, rgb(255, 241, 242), rgb(255, 218, 221));
  --gradient-amber: linear-gradient(135deg, rgb(245, 158, 11), rgb(232, 93, 4));

  /* typography: Mukta for English AND Marathi (one family, self-hosted, see fonts.css) */
  --font-body: 'Mukta', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --text-2xs: 0.7rem;
  --text-xs: 0.78rem;
  --text-sm: 0.875rem;
  --text-md: 1rem;
  --text-lg: 1.15rem;
  --text-xl: 1.4rem;
  --text-2xl: 1.5rem;
  --text-3xl: 2.03rem;
  --leading-tight: 1.3;     /* Devanagari matras need more room than Latin: never below 1.3 */
  --leading-body: 1.65;

  /* ---------- 3. semantic roles ---------- */
  --color-canvas: #fffffe;
  --color-text: var(--neutral-900);
  --color-text-muted: var(--neutral-600);
  --color-surface: var(--color-canvas);
  --color-surface-warm: var(--neutral-50);
  --color-surface-sand: var(--neutral-100);
  --color-line: var(--neutral-200);
  --color-line-strong: var(--neutral-300);
  --color-action: var(--brand-700);          /* buttons, links, headings */
  --color-action-hover: var(--brand-800);
  --color-deep: var(--oxblood);              /* header strip, hero, footer */
  --color-cta: var(--saffron-500);           /* the one call to action per screen */
  --color-cta-hover: var(--saffron-400);
  --color-on-cta: var(--neutral-950);        /* dark text on saffron: 6:1 (white would be 3.7:1) */
  --color-accent-text: var(--bronze-600);    /* small coloured text on light surfaces */
  --color-focus: var(--saffron-500);

  /* match bands (Smart match) */
  --band-excellent: #17692b;
  --band-good: #2b843b;
  --band-fair: var(--bronze-600);
  --band-low: var(--brand-600);
  --band-none: var(--neutral-600);

  /* ---------- legacy names (admin.css and old markup still use them; they now resolve to the tokens) ---------- */
  --maroon: var(--color-action);
  --maroon-dark: var(--color-deep);
  --maroon-mid: var(--brand-800);
  --saffron: var(--color-cta);
  --cream: var(--color-surface-warm);
  --sand: var(--color-surface-sand);
  --line: var(--color-line);
  --ink: var(--color-text);
  --muted: var(--color-text-muted);
  --radius: var(--radius-2xl);
  --shadow: var(--shadow-lg);

  /* ---------- 4. Bootstrap 5.3 bridge ---------- */
  --bs-body-font-family: var(--font-body);
  --bs-body-line-height: var(--leading-body);
  --bs-body-color: var(--color-text);
  --bs-body-bg: var(--color-canvas);
  --bs-secondary-color: var(--color-text-muted);
  --bs-link-color: var(--color-action);
  --bs-link-hover-color: var(--color-action-hover);
  --bs-link-color-rgb: 134, 28, 18;
  --bs-link-hover-color-rgb: 94, 19, 12;
  --bs-border-color: var(--color-line);
  --bs-primary: var(--color-action);
  --bs-primary-rgb: 134, 28, 18;
  --bs-border-radius: var(--radius-lg);
  --bs-border-radius-lg: var(--radius-xl);
  --bs-focus-ring-color: rgba(232, 93, 4, 0.35);
}