/* =============================================================
   Momentos — Design Tokens
   Color, type, spacing, radius, shadow, motion.
   Import this file once in your root HTML.
   ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600;0,6..72,700;1,6..72,400;1,6..72,500&family=Manrope:wght@400;500;600;700&family=Caveat:wght@400;600&display=swap');

:root {
  /* ---------- COLOR — Paper & Ink ---------- */
  --paper:         #FBF7F0;   /* default canvas */
  --paper-deep:    #F4EFE6;   /* recessed sections, cards */
  --paper-shadow:  #ECE4D6;   /* dividers, hover bg */
  --ink:           #2E1F18;   /* primary text */
  --ink-soft:      #5C4A40;   /* secondary text */
  --ink-muted:     #8C7B6F;   /* tertiary, captions */
  --ink-faint:     #BFB1A3;   /* placeholder, disabled */

  /* ---------- COLOR — Brand ---------- */
  --terracota:        #C77B5C;   /* primary accent / CTA */
  --terracota-deep:   #B36A4C;   /* pressed / hover */
  --terracota-soft:   #E8C2B0;   /* bg tint */
  --terracota-wash:   #F6E5DD;   /* faint bg */

  --sage:        #87A088;   /* secondary accent / child tags default */
  --sage-deep:   #6E8870;
  --sage-soft:   #C5D3C6;
  --sage-wash:   #E5ECE5;

  --mustard:        #D9A55C;   /* highlights, dates */
  --mustard-deep:   #BE8C46;
  --mustard-soft:   #EFD5A5;
  --mustard-wash:   #F8EBD0;

  --wine:        #8B3A3A;   /* error / danger */
  --wine-deep:   #6F2C2C;
  --wine-soft:   #D9A8A8;
  --wine-wash:   #F0DBDB;

  /* ---------- COLOR — Semantic ---------- */
  --bg:           var(--paper);
  --bg-elevated:  #FFFFFF;
  --bg-recessed:  var(--paper-deep);

  --fg:           var(--ink);
  --fg-soft:      var(--ink-soft);
  --fg-muted:     var(--ink-muted);
  --fg-faint:     var(--ink-faint);
  --fg-inverse:   var(--paper);

  --accent:       var(--terracota);
  --accent-deep:  var(--terracota-deep);
  --accent-soft:  var(--terracota-soft);

  --success:      var(--sage);
  --warning:      var(--mustard);
  --danger:       var(--wine);

  --border:       rgba(46, 31, 24, 0.08);
  --border-strong:rgba(46, 31, 24, 0.16);
  --border-focus: var(--terracota);

  /* ---------- TYPOGRAPHY — Families ---------- */
  --font-display: "Newsreader", "Iowan Old Style", Georgia, serif;
  --font-sans:    "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-hand:    "Caveat", "Bradley Hand", cursive;

  /* ---------- TYPOGRAPHY — Sizes ---------- */
  --text-xs:    11px;
  --text-sm:    13px;
  --text-base:  15px;
  --text-md:    17px;
  --text-lg:    20px;
  --text-xl:    24px;
  --text-2xl:   32px;
  --text-3xl:   42px;
  --text-4xl:   56px;
  --text-5xl:   72px;

  /* ---------- TYPOGRAPHY — Weights ---------- */
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semi:    600;
  --weight-bold:    700;

  /* ---------- TYPOGRAPHY — Leading ---------- */
  --leading-tight:  1.15;
  --leading-snug:   1.3;
  --leading-normal: 1.5;
  --leading-loose:  1.7;

  /* ---------- TYPOGRAPHY — Tracking ---------- */
  --track-tight:   -0.02em;
  --track-snug:    -0.01em;
  --track-normal:  0;
  --track-wide:    0.04em;
  --track-eyebrow: 0.14em;

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

  /* ---------- RADIUS ---------- */
  --radius-xs:    4px;
  --radius-sm:    8px;
  --radius-md:    10px;
  --radius-lg:    12px;
  --radius-xl:    16px;
  --radius-2xl:   24px;
  --radius-pill:  999px;
  --radius-polaroid: 2px;

  /* ---------- SHADOW (warm, never blue-gray) ---------- */
  --shadow-sm:        0 1px 2px rgba(46, 31, 24, 0.06);
  --shadow-md:        0 4px 12px rgba(46, 31, 24, 0.08);
  --shadow-lg:        0 12px 28px rgba(46, 31, 24, 0.12);
  --shadow-xl:        0 24px 60px rgba(46, 31, 24, 0.18);
  --shadow-polaroid:  0 6px 18px rgba(46, 31, 24, 0.14), 0 2px 4px rgba(46, 31, 24, 0.08);
  --shadow-inset:     inset 0 1px 2px rgba(46, 31, 24, 0.06);

  /* ---------- MOTION ---------- */
  --ease-out-quart: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-quart:  cubic-bezier(0.5, 0, 0.75, 0);
  --ease-in-out:    cubic-bezier(0.65, 0, 0.35, 1);

  --duration-fast:   160ms;
  --duration-base:   220ms;
  --duration-screen: 320ms;
}

/* =============================================================
   SEMANTIC TYPE STYLES — use as classes or copy into utilities
   ============================================================= */

.display-hero {
  font-family: var(--font-display);
  font-size: var(--text-5xl);
  font-weight: var(--weight-regular);
  line-height: var(--leading-tight);
  letter-spacing: var(--track-tight);
  color: var(--ink);
}

.display-1, h1 {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: var(--weight-regular);
  line-height: var(--leading-tight);
  letter-spacing: var(--track-tight);
  color: var(--ink);
}

.display-2, h2 {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: var(--weight-regular);
  line-height: var(--leading-snug);
  letter-spacing: var(--track-snug);
  color: var(--ink);
}

.display-3, h3 {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--weight-medium);
  line-height: var(--leading-snug);
  color: var(--ink);
}

.title-lg, h4 {
  font-family: var(--font-sans);
  font-size: var(--text-xl);
  font-weight: var(--weight-semi);
  line-height: var(--leading-snug);
  color: var(--ink);
}

.title, h5 {
  font-family: var(--font-sans);
  font-size: var(--text-lg);
  font-weight: var(--weight-semi);
  line-height: var(--leading-snug);
  color: var(--ink);
}

.title-sm, h6 {
  font-family: var(--font-sans);
  font-size: var(--text-md);
  font-weight: var(--weight-semi);
  line-height: var(--leading-snug);
  color: var(--ink);
}

.body-lg {
  font-family: var(--font-sans);
  font-size: var(--text-md);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  color: var(--ink);
}

.body, p {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  color: var(--ink);
}

.body-sm {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  color: var(--ink-soft);
}

.caption {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  line-height: var(--leading-normal);
  color: var(--ink-muted);
}

.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--weight-semi);
  line-height: 1;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--ink-muted);
}

.date-display {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--weight-regular);
  color: var(--ink-soft);
}

.handwritten {
  font-family: var(--font-hand);
  font-weight: var(--weight-regular);
  color: var(--ink-soft);
}

/* =============================================================
   BASE RESETS — opt-in, scope to body if needed
   ============================================================= */

body.momentos {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body.momentos * { box-sizing: border-box; }