/* ============================================================
   SOLO YATRI — WABI-SABI EDITORIAL TOKENS
   Art direction: High-end travel zine. Asymmetric, textured,
   unhurried. Imperfection is beauty.
   ============================================================ */

:root {
  /* --- Color palette — warm, organic, aged paper --- */
  --color-parchment:   #F5EFE6;   /* page background — warm off-white */
  --color-paper:       #EAE3D8;   /* section alt — slightly darker warm */
  --color-stone:       #D9D0C3;   /* borders, dividers */
  --color-ash:         #8B8178;   /* ghost text, muted elements */
  --color-ink:         #2A2118;   /* primary text — warm near-black */
  --color-ink-muted:   #6B6052;   /* secondary text — warm mid-tone */
  --color-terracotta:  #B85C38;   /* accent / CTA — subdued rust */
  --color-terracotta-light: #D4785A;
  --color-sage:        #5C6B56;   /* secondary accent — earth green */
  --color-sage-light:  #7A8A74;   /* lighter sage for hover */
  --color-gold:        #9A7B4F;   /* tertiary — warm ochre */

  /* --- Typography — Fraunces editorial, DM Sans body --- */
  --font-display: 'Fraunces', Georgia, serif;
  --font-body:    'DM Sans', system-ui, sans-serif;

  /* Type scale — fluid via clamp */
  --text-xs:   0.8125rem;
  --text-sm:   0.9375rem;
  --text-base: 1.0625rem;
  --text-lg:   1.25rem;
  --text-xl:   1.5rem;
  --text-2xl:  2rem;
  --text-3xl:  2.75rem;
  --text-4xl:  4rem;
  --text-5xl:  6rem;

  /* Line heights */
  --leading-tight:   1.08;
  --leading-snug:    1.28;
  --leading-normal:  1.65;
  --leading-relaxed: 1.85;

  /* Letter spacing */
  --tracking-tight:  -0.025em;
  --tracking-normal:   0em;
  --tracking-wide:    0.04em;
  --tracking-widest:  0.12em;

  /* --- Spacing — generous, editorial --- */
  --space-1:   0.25rem;
  --space-2:   0.5rem;
  --space-3:   0.75rem;
  --space-4:   1rem;
  --space-5:   1.25rem;
  --space-6:   1.5rem;
  --space-8:   2rem;
  --space-10:  2.5rem;
  --space-12:  3rem;
  --space-16:  4rem;
  --space-20:  5rem;
  --space-24:  6rem;
  --space-32:  8rem;
  --space-40:  10rem;

  /* --- Container — editorial narrow --- */
  --container-sm:  540px;
  --container-md:  720px;
  --container-lg:  960px;
  --container-xl:  1200px;
  --gutter:       clamp(1.25rem, 5vw, 4rem);

  /* --- Borders & radii — soft, organic --- */
  --radius-xs:  2px;
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  16px;
  --radius-xl:  24px;
  --radius-full: 9999px;

  /* --- Shadows — soft, warm, diffuse --- */
  --shadow-xs: 0 1px 2px rgba(42,33,24,0.06);
  --shadow-sm: 0 2px 6px rgba(42,33,24,0.08);
  --shadow-md: 0 6px 20px rgba(42,33,24,0.10);
  --shadow-lg: 0 16px 48px rgba(42,33,24,0.12);

  /* --- Transitions --- */
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:   cubic-bezier(0.65, 0, 0.35, 1);
  --ease-editorial: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --duration-fast:   150ms;
  --duration-base:   280ms;
  --duration-slow:   450ms;
  --duration-slower: 700ms;

  /* --- Z-index scale --- */
  --z-base:     0;
  --z-above:    10;
  --z-nav:       100;
  --z-overlay:   200;
  --z-dialog:    300;
  --z-toast:     400;
}