/* ═══════════════════════════════════════════════════════════════════════
   tokens.css — THE design tokens for thejainreligion.in
   Define here once; never hardcode a colour, size or shadow anywhere else.

   Aesthetic: temple marble and ivory, saffron of the Jain flag, muted gold,
   deep maroon. Serene and devotional, never corporate.

   Every colour pair below was verified against WCAG 2.1 AA before shipping
   (20/20 combinations pass — see docs/STYLE_GUIDE.md for the measured ratios).
   ═══════════════════════════════════════════════════════════════════════ */

:root {

  /* ─── Surfaces ───────────────────────────────────────────────────── */
  --bg:              #FDFBF7;   /* ivory page background (temple marble)   */
  --surface:         #FFFFFF;   /* cards, panels                           */
  --surface-muted:   #F3EEE4;   /* subtle inset panels                     */
  --surface-warm:    #FBF3E0;   /* highlight blocks, shloka, sect notes    */
  --surface-dark:    #241F1C;   /* footer, dark sections                   */

  /* ─── Text ───────────────────────────────────────────────────────── */
  --text:            #1A1614;   /* near-black, warm    — 17.4:1 on --bg    */
  --text-muted:      #5A5147;   /* secondary text      —  7.5:1 on --bg    */
  --text-on-dark:    #FDFBF7;   /*                     — 15.8:1 on dark    */
  --text-muted-dark: #C9BFB2;   /*                     —  9.0:1 on dark    */

  /* ─── Brand ──────────────────────────────────────────────────────── */
  /* Saffron of the Jain flag, darkened to the point where it is legible
     as text. The bright flag saffron is decorative only — never text.    */
  --primary:         #B23E00;   /* links, buttons      —  5.7:1 on --bg    */
  --primary-hover:   #8C2E00;   /* hover/active        —  8.1:1 on --bg    */
  --primary-soft:    #FFF1E6;   /* tinted backgrounds                      */
  --saffron-flag:    #FF9933;   /* DECORATIVE ONLY — never text            */

  --accent:          #7A5C12;   /* gold, as text       —  6.0:1 on --bg    */
  --accent-bright:   #C9A84C;   /* gold, decorative / on dark              */
  --accent-soft:     #F5C518;   /* gold button fill (use --text on top)    */

  --maroon:          #6E2019;   /* heading accents     — 10.8:1 on --bg    */
  --maroon-light:    #8A2C22;   /* gradient partner for --maroon           */
  --primary-border:  #F2D9C6;   /* border on --primary-soft                */

  /* ─── Lines & focus ──────────────────────────────────────────────── */
  --border:          #E6DFD2;
  --border-strong:   #CFC4B0;
  --border-warm:     #F0E4C8;   /* border for warm surfaces               */

  /* ─── Third-party brand colours (share buttons only) ─────────────── */
  --whatsapp:        #25D366;
  --whatsapp-hover:  #1EBE5B;
  --whatsapp-ink:    #06301A;   /* 8.9:1 on --whatsapp                    */
  --focus-ring:      #B23E00;
  --focus-width:     3px;

  /* ─── Feedback ───────────────────────────────────────────────────── */
  --success:         #1F6A3D;
  --danger:          #A32015;
  --warning:         #8A5A00;

  /* ═══ Typography ═══════════════════════════════════════════════════
     Serif for headings (dignified, and Noto Serif Devanagari carries
     Hindi headings in the same voice). Sans for body — better on small
     Android screens, which is most of this audience.                   */
  --font-heading: 'Noto Serif', 'Noto Serif Devanagari', Georgia, 'Times New Roman', serif;
  --font-body:    'Noto Sans', 'Noto Sans Devanagari', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-deva:    'Noto Sans Devanagari', 'Noto Serif Devanagari', system-ui, sans-serif;
  --font-mono:    ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* ─── Type scale (fluid, 360px → 1280px) ─────────────────────────── */
  --fs-h1:    clamp(1.75rem, 1.35rem + 1.8vw, 2.75rem);
  --fs-h2:    clamp(1.4rem,  1.18rem + 1.0vw, 2.0rem);
  --fs-h3:    clamp(1.2rem,  1.08rem + 0.55vw, 1.5rem);
  --fs-h4:    clamp(1.05rem, 1.0rem  + 0.28vw, 1.25rem);
  --fs-h5:    1rem;
  --fs-h6:    0.9375rem;
  --fs-body:  clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
  --fs-lead:  clamp(1.0625rem, 1.0rem + 0.35vw, 1.1875rem);
  --fs-small: 0.875rem;
  --fs-xs:    0.78125rem;

  --lh-tight:   1.2;    /* headings                                    */
  --lh-snug:    1.4;
  --lh-body:    1.7;    /* long-form teaching text — never below 1.6   */
  --lh-loose:   1.9;    /* Devanagari needs more room for matras       */

  --measure:      68ch;   /* 60–75 character line length               */
  --measure-wide: 78ch;

  --tracking-caps: 0.08em;

  /* ─── Spacing scale (4px base) ───────────────────────────────────── */
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  1.5rem;
  --sp-6:  2rem;
  --sp-7:  3rem;
  --sp-8:  4rem;
  --sp-9:  6rem;

  /* ─── Radius ─────────────────────────────────────────────────────── */
  --r-sm:   6px;
  --r-md:   12px;
  --r-lg:   18px;
  --r-xl:   28px;
  --r-pill: 999px;

  /* ─── Shadow (warm-tinted, never neutral grey) ───────────────────── */
  --sh-sm: 0 1px 2px rgba(38, 28, 18, .06);
  --sh-md: 0 4px 14px rgba(38, 28, 18, .07);
  --sh-lg: 0 12px 32px rgba(38, 28, 18, .10);
  --sh-focus: 0 0 0 var(--focus-width) rgba(178, 62, 0, .35);

  /* ─── Motion ─────────────────────────────────────────────────────── */
  --ease: cubic-bezier(.4, 0, .2, 1);
  --dur:  .2s;

  /* ─── Layout ─────────────────────────────────────────────────────── */
  --container:      1200px;
  --container-text: 46rem;   /* long-form reading column                */
  --touch:          44px;    /* minimum touch target                    */
  --header-h:       64px;
}

/* Honour the user's motion preference everywhere. */
@media (prefers-reduced-motion: reduce) {
  :root { --dur: 0.01ms; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}