/*
═══════════════════════════════════════════════════════════════════
 Dhārā · tokens.css
 The single source of truth for every design decision.
 Generated by /admin/brand and pushed to S3.
 Every component CSS references ONLY these tokens — never raw values.
═══════════════════════════════════════════════════════════════════
*/

:root {
  /* ─── COLOR · LIGHT (default) ─── */
  --color-bg:           #faf6ee;
  --color-bg-elev:      #f3ecdc;
  --color-bg-sunken:    #ede3cb;
  --color-ink:          #1a1410;
  --color-ink-soft:     #3d3329;
  --color-ink-mid:      #5a4a36;
  --color-muted:        #7a6b54;
  --color-rule:         #e5dbc2;
  --color-rule-strong:  #d4c7a3;
  --color-accent:       #b8362a;   /* kumkum */
  --color-accent-soft:  #d96450;
  --color-warm:         #c89b3c;   /* turmeric */
  --color-warm-deep:    #a67a23;
  --color-warm-pale:    #e8d49a;

  /* ─── TYPE FAMILIES ─── */
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body:    'Spectral', Georgia, serif;
  --font-ui:      'Inter Tight', system-ui, sans-serif;
  --font-indic:   'Tiro Devanagari Sanskrit', serif;
  --font-mono:    'JetBrains Mono', monospace;

  /* ─── TYPE SCALE (modular, ~1.25 ratio) ─── */
  --size-xs:    0.75rem;
  --size-sm:    0.875rem;
  --size-base:  1rem;
  --size-md:    1.125rem;
  --size-lg:    1.25rem;
  --size-xl:    1.5rem;
  --size-2xl:   1.875rem;
  --size-3xl:   2.25rem;
  --size-4xl:   3rem;
  --size-5xl:   3.75rem;
  --size-6xl:   4.5rem;
  --size-7xl:   6rem;

  /* ─── LINE HEIGHTS ─── */
  --leading-tight: 1.1;
  --leading-snug:  1.3;
  --leading-base:  1.6;
  --leading-loose: 1.75;

  /* ─── LETTER SPACING ─── */
  --tracking-tighter: -0.025em;
  --tracking-tight:   -0.015em;
  --tracking-base:    0;
  --tracking-wide:    0.04em;
  --tracking-wider:   0.12em;
  --tracking-widest:  0.24em;

  /* ─── SPACING (4pt base, 8pt rhythm) ─── */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.5rem;
  --space-6:  2rem;
  --space-7:  2.5rem;
  --space-8:  3rem;
  --space-9:  4rem;
  --space-10: 5rem;
  --space-11: 6rem;
  --space-12: 8rem;

  /* ─── RADIUS ─── */
  --radius-xs:   1px;
  --radius-sm:   2px;
  --radius-md:   6px;
  --radius-lg:   12px;
  --radius-pill: 999px;

  /* ─── BORDERS ─── */
  --border-thin:   1px;
  --border-medium: 2px;
  --border-thick:  3px;

  /* ─── SHADOWS ─── */
  --shadow-sm: 0 2px 8px -2px rgb(0 0 0 / .08);
  --shadow-md: 0 8px 24px -8px rgb(0 0 0 / .15);
  --shadow-lg: 0 24px 48px -16px rgb(0 0 0 / .25);

  /* ─── MOTION ─── */
  --ease: cubic-bezier(.4, 0, .2, 1);
  --dur-fast: 150ms;
  --dur-base: 250ms;
  --dur-slow: 400ms;

  /* ─── LAYOUT WIDTHS ─── */
  --container-sm:  640px;
  --container-md:  768px;
  --container-lg:  1024px;
  --container-xl:  1280px;
  --container-2xl: 1440px;
  --content-width: 720px;

  /* ─── BREAKPOINTS (for documentation only — used in media queries below) ─── */
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;

  /* ─── MOTIF (kumkum brand line) ─── */
  --motif-width: 140px;
  --motif-stroke:   1.4px;
  --motif-color:    var(--color-accent);
  --motif-dot-size: 2px;
  --motif-anim-duration: 8s;
  --motif-anim-amplitude: 1.5px;
  --motif-anim-enabled: 1;

  /* ─── SEMANTIC STATUS COLORS ─── */
  /* Used by status pills, save indicators, alerts. Tokenized so dark theme can shift them. */
  --color-status-success:      #5a8a3a;
  --color-status-success-text: #3d6b22;
  --color-status-info:         #2d6b8c;
  --color-status-info-text:    #2d6b8c;
  --color-status-warn:         var(--color-warm-deep);
  --color-status-error:        var(--color-accent);
}

/* ─── COLOR · DARK (manual override) ─── */
[data-theme="dark"] {
  --color-bg:           #0f0c0a;
  --color-bg-elev:      #1a1410;
  --color-bg-sunken:    #080604;
  --color-ink:          #f3ecdc;
  --color-ink-soft:     #d4c7a3;
  --color-ink-mid:      #a89578;
  --color-muted:        #7a6b54;
  --color-rule:         #2a221a;
  --color-rule-strong:  #3d3329;
  --color-accent:       #d96450;
  --color-accent-soft:  #e88575;
  --color-warm:         #d4a850;
  --color-warm-deep:    #b8902c;
  --color-warm-pale:    #8a6a2a;

  /* Status colors lift in dark mode to maintain readability */
  --color-status-success:      #8ab866;
  --color-status-success-text: #a8d484;
  --color-status-info:         #6bafd0;
  --color-status-info-text:    #88c4e2;
}

/* ─── COLOR · AUTO (follow OS preference) ─── */
@media (prefers-color-scheme: dark) {
  [data-theme="auto"] {
    --color-bg:           #0f0c0a;
    --color-bg-elev:      #1a1410;
    --color-bg-sunken:    #080604;
    --color-ink:          #f3ecdc;
    --color-ink-soft:     #d4c7a3;
    --color-ink-mid:      #a89578;
    --color-muted:        #7a6b54;
    --color-rule:         #2a221a;
    --color-rule-strong:  #3d3329;
    --color-accent:       #d96450;
    --color-accent-soft:  #e88575;
    --color-warm:         #d4a850;
    --color-warm-deep:    #b8902c;
    --color-warm-pale:    #8a6a2a;

    --color-status-success:      #8ab866;
    --color-status-success-text: #a8d484;
    --color-status-info:         #6bafd0;
    --color-status-info-text:    #88c4e2;
  }
}