/* =====================================================================
   Gurutattva — design tokens
   Tier 1 (primitives) are referenced ONLY by tier 2.
   Tier 2 (semantic) are the ONLY tokens components may use.
   Light theme only for now; a dark remap would redefine tier 2 only.
   ===================================================================== */

:root {
  /* ---------- Tier 1: primitives ---------- */

  /* Brand purple, derived from the logo colour #512D7C */
  --scale-purple-50:  #f6f1fb;
  --scale-purple-100: #ece3f6;
  --scale-purple-200: #d9c7ec;
  --scale-purple-300: #b99bd9;
  --scale-purple-500: #7a4fa6;
  --scale-purple-700: #512d7c;
  --scale-purple-800: #3d2060;
  --scale-purple-900: #2a1544;

  /* Warm sand / ivory ground */
  --scale-sand-50:  #fcfaf6;
  --scale-sand-100: #f7f2ea;
  --scale-sand-200: #ede5d8;
  --scale-sand-300: #dccfbc;
  --scale-sand-600: #8b7d6a;

  /* Ink */
  --scale-ink-900: #251c2e;
  --scale-ink-700: #4a4154;
  --scale-ink-500: #6f6679;

  /* Saffron / marigold, used once: giving */
  --scale-saffron-100: #fdefdc;
  --scale-saffron-500: #b5621c; /* 4.6:1 on white */
  --scale-saffron-600: #9a5116;

  /* Gold hairline for the "river" motif */
  --scale-gold-400: #cdb27a;

  --scale-white: #ffffff;

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

  /* Radii */
  --radius-1: 0.375rem;
  --radius-2: 0.75rem;
  --radius-3: 1.25rem;
  --radius-pill: 999px;

  /* Type scale (fluid) */
  --fs-xs: 0.8125rem;
  --fs-sm: 0.9375rem;
  --fs-md: 1.0625rem;
  --fs-lg: 1.25rem;
  --fs-xl: clamp(1.5rem, 1.2rem + 1vw, 1.875rem);
  --fs-2xl: clamp(2rem, 1.5rem + 1.8vw, 2.75rem);
  --fs-3xl: clamp(2.5rem, 1.6rem + 3.2vw, 4.25rem);

  /* Line heights */
  --lh-tight: 1.15;
  --lh-snug: 1.3;
  --lh-body: 1.65;

  /* Shadows */
  --shadow-1: 0 1px 2px rgb(37 28 46 / 0.06), 0 2px 8px rgb(37 28 46 / 0.05);
  --shadow-2: 0 4px 16px rgb(37 28 46 / 0.08), 0 12px 40px rgb(81 45 124 / 0.08);

  /* Dimensions */
  --dim-content: 74rem;
  --dim-prose: 38rem;
  --dim-control: 2.875rem;
  --dim-header: 4.25rem;
  --dim-border: 1px;
  --dim-border-strong: 2px;

  /* Motion */
  --dur-fast: 160ms;
  --dur-base: 320ms;
  --dur-slow: 700ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);

  /* ---------- Tier 2: semantic ---------- */

  --color-bg: var(--scale-sand-50);
  --color-bg-alt: var(--scale-sand-100);
  --color-surface: var(--scale-white);
  --color-surface-soft: var(--scale-purple-50);
  --color-ink: var(--scale-ink-900);
  --color-ink-soft: var(--scale-ink-700);
  --color-muted: var(--scale-ink-500);
  --color-border: var(--scale-sand-200);
  --color-border-strong: var(--scale-sand-300);

  --color-brand: var(--scale-purple-700);
  --color-brand-hover: var(--scale-purple-800);
  --color-brand-fg: var(--scale-white);
  --color-brand-soft-bg: var(--scale-purple-100);
  --color-brand-soft-fg: var(--scale-purple-800);
  --color-brand-tint: var(--scale-purple-200);
  --color-brand-deep: var(--scale-purple-900);

  --color-accent: var(--scale-saffron-500);
  --color-accent-hover: var(--scale-saffron-600);
  --color-accent-fg: var(--scale-white);
  --color-accent-soft-bg: var(--scale-saffron-100);

  --color-motif: var(--scale-gold-400);
  --color-focus: var(--scale-purple-500);

  --font-display: "Cormorant Garamond", "Tiro Devanagari Hindi", Georgia, serif;
  --font-body: "Source Sans 3", "Noto Sans Devanagari", -apple-system, "Segoe UI", sans-serif;
  --font-display-deva: "Tiro Devanagari Hindi", "Cormorant Garamond", serif;
  --font-body-deva: "Noto Sans Devanagari", "Source Sans 3", sans-serif;

  --radius-card: var(--radius-3);
  --radius-control: var(--radius-pill);
  --radius-media: var(--radius-2);
  --radius-chip: var(--radius-1);

  --control-h: var(--dim-control);
  --content-max: var(--dim-content);
  --prose-max: var(--dim-prose);
  --header-h: var(--dim-header);
  --border-w: var(--dim-border);
  --border-w-strong: var(--dim-border-strong);

  --shadow-card: var(--shadow-1);
  --shadow-raised: var(--shadow-2);
}