/* ============================================
   SugarCARE — Design Tokens
   Single source of truth. Edit here once.
   ============================================ */

/* ── LANGUAGE: English only (Malayalam disabled) ── */
.ml { display: none !important; }
.en { display: block !important; }
span.en, button .en, a .en, li .en, td .en, th .en { display: inline !important; }
.lang-toggle { display: none !important; }

:root {
  /* ─── BRAND COLOURS ─────────────────────────── */
  --c-purple:           #4A2FA0;
  --c-purple-soft:      #6B4DD0;
  --c-purple-deep:      #1A0E50;
  --c-purple-tint:      #E4E0F4;
  --c-purple-tint-soft: #F2EEFC;
  --c-purple-light:     #C9BFEF;

  --c-orange:           #E86A1A;
  --c-orange-tint:      #FCE4D4;

  --c-mint-tint:        #DFF5EB;
  --c-sky-tint:         #E2EEFB;

  --c-white:            #FFFFFF;
  --c-bg:               #F0F2FA;
  --c-text:             #0F172A;
  --c-muted:            #64748B;
  --c-border:           #E2E8F0;

  /* ─── TYPOGRAPHY ────────────────────────────── */
  /* Display: headings, CTAs, small caps, data */
  --font-en:      'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  /* Body: paragraphs, UI, readable copy */
  --font-en-body: 'Hanken Grotesk', system-ui, -apple-system, sans-serif;
  --font-ml:      'Noto Sans Malayalam', system-ui, sans-serif;

  /* Type scale — fluid via clamp(min, base+vw, max) */
  --t-xs:   clamp(.75rem, .72rem + .15vw, .8125rem);
  --t-sm:   clamp(.8125rem, .78rem + .2vw, .875rem);
  --t-base: clamp(.9375rem, .88rem + .3vw, 1rem);
  --t-md:   clamp(1.0625rem, .98rem + .4vw, 1.125rem);
  --t-lg:   clamp(1.25rem, 1.12rem + .65vw, 1.5rem);
  --t-xl:   clamp(1.5rem, 1.3rem + 1vw, 2rem);
  --t-2xl:  clamp(1.875rem, 1.5rem + 1.85vw, 2.75rem);
  --t-3xl:  clamp(2.25rem, 1.7rem + 2.75vw, 3.75rem);
  --t-4xl:  clamp(2.75rem, 2rem + 3.75vw, 5rem);

  /* ─── SPACING SCALE — bumped +25% for breathing room ── */
  --s-xs:   5px;
  --s-sm:   10px;
  --s-md:   20px;
  --s-lg:   40px;
  --s-xl:   80px;
  --s-2xl:  120px;
  --s-3xl:  160px;

  /* ─── RADII ─────────────────────────────────── */
  --r-sm:   12px;
  --r-md:   18px;
  --r-lg:   24px;
  --r-xl:   32px;
  --r-pill: 100px;

  /* ─── SHADOWS — soft UI, layered ────────────── */
  --sh-1:     0 1px 2px rgba(15,23,42,.04), 0 4px 14px rgba(74,47,160,.06);
  --sh-2:     0 2px 6px rgba(15,23,42,.05), 0 12px 28px rgba(74,47,160,.10);
  --sh-3:     0 4px 12px rgba(15,23,42,.06), 0 24px 48px rgba(74,47,160,.16);
  --sh-float: 0 8px 22px rgba(15,23,42,.10), 0 2px 6px rgba(74,47,160,.08);

  /* ─── LAYOUT ────────────────────────────────── */
  --maxw:    1200px;
  --gutter:  clamp(1.25rem, 4vw, 2.5rem);
  --nav-h:   68px;

  /* ─── SECTION RULES ─────────────────────────── */
  /* Default: 1px hairline for intra-content section dividers */
  --rule:        1px solid var(--c-border);
  /* Strong: 2.5px orange — reserved for major chapter breaks (one per page max) */
  --rule-strong: 2.5px solid var(--c-orange);

  /* ─── MOTION ────────────────────────────────── */
  --t-fast:  120ms ease;
  --t-base-d: 200ms ease;
  --t-slow:  320ms ease;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}