/* =============================================================
   Riya Naskar Design System — Tokens
   Warm, bright, trustworthy. Editorial serif + modern sans.
   ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=DM+Serif+Display:ital@0;1&family=Geist:wght@300;400;500;600;700&family=Geist+Mono:wght@400;500&display=swap');

:root {
  /* -------- Core palette: warm earth tones -------- */
  --ember-50:  #FDF1EB;
  --ember-100: #FADBCC;
  --ember-200: #F2B299;
  --ember-300: #E88A6A;
  --ember-400: #DB6A47;   /* primary */
  --ember-500: #C25638;
  --ember-600: #9E4128;
  --ember-700: #76301E;

  --honey-50:  #FDF6E4;
  --honey-100: #F8E5B2;
  --honey-200: #F1CE7A;
  --honey-300: #E8B04D;   /* secondary */
  --honey-400: #D6962C;
  --honey-500: #B17719;
  --honey-600: #855810;

  /* refreshing accent — sage with a hint of teal */
  --verdant-50:  #EAF1EC;
  --verdant-100: #C8DBCD;
  --verdant-200: #95B9A0;
  --verdant-300: #6FA68F;   /* accent */
  --verdant-400: #4F8870;
  --verdant-500: #366954;
  --verdant-600: #234A3B;

  /* -------- Warm neutrals (cream → ink) -------- */
  /* Warm browns — no true black. Every dark step keeps the ember
     undertone so the system never feels cold or somber. */
  --cream:    #FAF5EC;      /* page background */
  --paper:    #F4ECD8;      /* tinted surface */
  --sand:     #ECE2CC;
  --stone:    #C9B8A0;      /* warm taupe */
  --slate:    #8A7C68;      /* warm mid */
  --mud:      #6B5A48;      /* warm brown */
  --walnut:   #4A3729;      /* primary text — warm walnut */
  --espresso: #2F2218;      /* headlines — deepest warm brown */

  /* Back-compat aliases (older components reference --ink / --obsidian) */
  --ink:      var(--walnut);
  --obsidian: var(--espresso);

  /* -------- Semantic color roles -------- */
  --bg:           var(--cream);
  --bg-elevated:  #FFFCF5;
  --surface:      var(--paper);
  --surface-2:    var(--sand);
  --border:       rgba(42, 37, 32, 0.12);
  --border-strong:rgba(42, 37, 32, 0.22);

  --fg-1:         var(--ink);          /* primary text */
  --fg-2:         var(--mud);          /* secondary text */
  --fg-3:         var(--slate);        /* tertiary / meta */
  --fg-display:   var(--obsidian);     /* headlines */
  --fg-inverse:   var(--cream);

  --accent:       var(--ember-400);    /* primary action */
  --accent-hover: var(--ember-500);
  --accent-press: var(--ember-600);
  --accent-bg:    var(--ember-50);

  --accent-2:     var(--honey-300);    /* highlights, tags */
  --accent-2-bg:  var(--honey-50);

  --accent-3:     var(--verdant-300);  /* refresh / success / focus */
  --accent-3-bg:  var(--verdant-50);

  --success:      var(--verdant-400);
  --warning:      var(--honey-400);
  --danger:       #C0392B;
  --info:         #4A6D8C;

  /* -------- Typography families -------- */
  --font-display: 'Instrument Serif', 'Cormorant Garamond', Georgia, serif;
  --font-body:    'Geist', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono:    'Geist Mono', 'JetBrains Mono', ui-monospace, monospace;

  /* -------- Type scale (modular, gentle 1.25) -------- */
  --t-12: 0.75rem;     /* meta / labels */
  --t-14: 0.875rem;    /* small */
  --t-16: 1rem;        /* body */
  --t-18: 1.125rem;    /* body large */
  --t-22: 1.375rem;    /* lede */
  --t-28: 1.75rem;     /* h4 */
  --t-36: 2.25rem;     /* h3 */
  --t-48: 3rem;        /* h2 */
  --t-64: 4rem;        /* h1 */
  --t-96: 6rem;        /* display */

  --lh-tight: 1.05;
  --lh-snug:  1.2;
  --lh-base:  1.55;
  --lh-loose: 1.75;

  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-wider:  0.12em;   /* eyebrows, caps labels */

  /* -------- Spacing scale (4px base) -------- */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  20px;
  --s-6:  24px;
  --s-8:  32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;
  --s-20: 80px;
  --s-24: 96px;
  --s-32: 128px;

  /* -------- Radius -------- */
  --r-sm:  4px;
  --r-md:  8px;
  --r-lg:  14px;
  --r-xl:  22px;
  --r-2xl: 32px;
  --r-pill: 999px;

  /* -------- Shadow (warm, soft) -------- */
  --shadow-xs: 0 1px 0 rgba(42,37,32,0.04);
  --shadow-sm: 0 1px 2px rgba(42,37,32,0.06), 0 1px 1px rgba(42,37,32,0.04);
  --shadow-md: 0 4px 8px -2px rgba(42,37,32,0.08), 0 2px 4px -2px rgba(42,37,32,0.06);
  --shadow-lg: 0 12px 24px -8px rgba(42,37,32,0.14), 0 4px 8px -4px rgba(42,37,32,0.06);
  --shadow-xl: 0 24px 48px -12px rgba(42,37,32,0.20);
  --shadow-glow: 0 0 0 6px rgba(219,106,71,0.18);  /* ember focus halo */

  /* -------- Motion -------- */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 120ms;
  --dur-base: 220ms;
  --dur-slow: 420ms;
}

/* =============================================================
   Base element styles
   ============================================================= */
html, body {
  background: var(--bg);
  color: var(--fg-1);
  font-family: var(--font-body);
  font-size: var(--t-16);
  line-height: var(--lh-base);
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--fg-display);
  font-weight: 400;
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
  margin: 0;
}
h1 { font-size: var(--t-64); }
h2 { font-size: var(--t-48); }
h3 { font-size: var(--t-36); }
h4 { font-size: var(--t-28); }

h5, h6 {
  font-family: var(--font-body);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--fg-2);
  font-size: var(--t-12);
  margin: 0;
}

p {
  margin: 0 0 var(--s-4) 0;
  text-wrap: pretty;
  max-width: 68ch;
}

a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--accent-hover); }

code, pre, kbd {
  font-family: var(--font-mono);
  font-size: 0.92em;
}
code {
  background: var(--surface);
  padding: 1px 6px;
  border-radius: var(--r-sm);
  color: var(--fg-1);
}

::selection {
  background: var(--honey-200);
  color: var(--obsidian);
}

/* Eyebrow / kicker label */
.eyebrow {
  font-family: var(--font-body);
  font-size: var(--t-12);
  font-weight: 500;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--fg-3);
}

/* Lede paragraph (used under headlines) */
.lede {
  font-family: var(--font-display);
  font-size: var(--t-22);
  font-style: italic;
  line-height: var(--lh-snug);
  color: var(--fg-2);
  max-width: 56ch;
}