/* =========================================================================
   NAAM JAP · DESIGN TOKENS
   -------------------------------------------------------------------------
   Single authoritative source for the visual system. Palette, type, space,
   radius, elevation, motion. Dark theme is set on `[data-theme="dark"]`.
   ========================================================================= */

/* Light tokens on the :root scope */
:root {
  /* ---- COLOUR · LIGHT ------------------------------------------------ */
  --bg: #f6f3ec;                 /* warm paper ivory */
  --surface: #fffdf9;            /* resting cards */
  --surface-raised: #ffffff;     /* raised / overlays */
  --surface-sunken: #efece2;     /* wells / inputs */

  --ink: #2b2620;                /* warm near-black (primary text) */
  --ink-muted: #6d675c;          /* secondary text */
  --ink-faint: #98917f;          /* tertiary / captions */

  --line: #e7e0d0;               /* borders / hairlines */
  --line-strong: #d6cdb8;

  --primary: #33405f;            /* deep ink indigo — links, emphasis */
  --primary-ink: #232c45;

  --accent: #b5852f;             /* muted gold — the mala accent */
  --accent-strong: #9c701f;
  --accent-soft: #efe4cb;        /* tinted wash for fills */
  --accent-glow: rgba(181, 133, 47, 0.14);

  --success: #3f7256;
  --success-soft: #e3ecdf;
  --warning: #9a7424;
  --warning-soft: #f3e7c8;
  --error: #a3412f;
  --error-soft: #f3ddd6;

  --on-accent: #ffffff;
  --on-primary: #f4f1ea;

  --overlay: rgba(32, 27, 18, 0.42);
  --scrim: rgba(32, 27, 18, 0.55);

  /* Paper / glass feel */
  --paper-texture: radial-gradient(circle at 20% 18%, rgba(255,255,255,.5), rgba(255,255,255,0) 55%);

  /* ---- TYPOGRAPHY ---------------------------------------------------- */
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body: 'Inter', -apple-system, system-ui, 'Segoe UI', sans-serif;
  --font-dev: 'Tiro Devanagari Hindi', 'Noto Sans Devanagari', 'Nirmala UI', sans-serif;

  --text-3xl: clamp(2.6rem, 6vw, 4.6rem);   /* hero display */
  --text-2xl: clamp(2rem, 4.5vw, 3rem);     /* section display */
  --text-xl: clamp(1.5rem, 3vw, 1.95rem);   /* subheadings */
  --text-lg: 1.25rem;
  --text-base: 1rem;
  --text-sm: 0.9rem;
  --text-xs: 0.78rem;

  --lh-tight: 1.12;
  --lh-snug: 1.35;
  --lh-body: 1.65;
  --tracking-tight: -0.02em;
  --tracking: -0.006em;

  --display-weight: 440;
  --body-weight: 400;
  --label-weight: 550;
  --number-weight: 620;

  /* Mantra (large Devanagari) numerals */
  --mantra-size: clamp(1.7rem, 5vw, 3rem);

  /* ---- SPACING -------------------------------------------------------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  --page-gutter: clamp(1.1rem, 4vw, 2.5rem);       /* page side padding */
  --page-max: 1160px;                              /* content max width */
  --prose-max: 68ch;                               /* reading width */
  --section-gap: clamp(3.5rem, 8vw, 7rem);         /* between page sections */
  --card-gap: clamp(1rem, 2.6vw, 1.6rem);
/* Sidebar / two-col rail */
  --rail-max: 340px;

  /* ---- RADIUS --------------------------------------------------------- */
  --radius-xs: 8px;
  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 22px;
  --radius-xl: 30px;
  --radius-pill: 999px;
  --radius-feed: 26px;

  /* ---- SHADOW · soft warm elevation ----------------------------------- */
  --shadow-xs: 0 1px 2px rgba(58, 48, 28, 0.05);
  --shadow-sm: 0 2px 6px rgba(58, 48, 28, 0.06), 0 1px 2px rgba(58, 48, 28, 0.05);
  --shadow-md: 0 10px 26px rgba(58, 48, 28, 0.10), 0 3px 8px rgba(58, 48, 28, 0.06);
  --shadow-lg: 0 24px 60px rgba(40, 32, 18, 0.16), 0 6px 16px rgba(40, 32, 18, 0.08);
  --shadow-pop: 0 30px 80px rgba(28, 22, 12, 0.28), 0 10px 26px rgba(28, 22, 12, 0.12);

  --ring-focus: 0 0 0 3px var(--accent-glow);

  /* ---- MOTION ---------------------------------------------------------- */
  --dur-fast: 150ms;
  --dur: 260ms;
  --dur-slow: 520ms;
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.2, 0.64, 1);

  /* ---- LAYOUT / STRUCTURE --------------------------------------------- */
  --header-h: 72px;
  --header-h-scrolled: 62px;
  --tabbar-h: 0px;                 /* becomes visible with bottom nav (mobile) */
  --z-header: 60;
  --z-drawer: 70;
  --z-overlay: 80;
  --z-modal: 90;
  --z-toast: 100;

  /* ---- COMPONENT TOKENS ------------------------------------------------ */
  --btn-h: 48px;
  --btn-h-lg: 56px;
  --input-h: 48px;
  --tap-min: 44px;                 /* minimum touch target */
  --thumb-min: 48px;

  --transition: all var(--dur) var(--ease-out);
}
/* Dark theme — warm charcoal, calm, low brightness */
[data-theme='dark'] {
  --bg: #15120e;
  --surface: #1e1a15;
  --surface-raised: #262117;
  --surface-sunken: #120f0b;

  --ink: #f1ece2;
  --ink-muted: #b4ad9c;
  --ink-faint: #7d7668;

  --line: #322c22;
  --line-strong: #463e30;

  --primary: #b6bfdd;
  --primary-ink: #e3e7f5;

  --accent: #d0a24d;
  --accent-strong: #e0b962;
  --accent-soft: #332a17;
  --accent-glow: rgba(208, 162, 77, 0.16);

  --success: #7fb391;
  --success-soft: #1f3327;
  --warning: #d8b15e;
  --warning-soft: #3a2f15;
  --error: #db7a63;
  --error-soft: #3d2019;

  --on-accent: #1c1406;
  --on-primary: #1a1c28;

  --overlay: rgba(6, 5, 3, 0.55);
  --scrim: rgba(6, 5, 3, 0.72);

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.45);
  --shadow-md: 0 12px 30px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 26px 64px rgba(0, 0, 0, 0.6);
  --shadow-pop: 0 34px 90px rgba(0, 0, 0, 0.7);
}

/* Reduced motion: collapse durations */
@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 1ms; --dur: 1ms; --dur-slow: 1ms; }
}