/* =========================================================================
   ViaWie Design System — Tokens · "The Index" v3
   The app is a librarian's private journal: a curator quietly indexing
   the people they know, then introducing two with a hand-written card.
   Forest is the bottle-green of a leather ledger. Oxblood is the bookmark.
   Parchment is the page. Stone is the margin.
   ========================================================================= */

@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;1,6..72,600&family=Be+Vietnam+Pro:wght@300;400;500;600;700&family=DM+Mono:wght@400;500&display=swap');

:root {
  /* ---- COLOR ---------------------------------------------------------- */
  /* Forest — primary brand. Bottle-green of a leather-bound journal. */
  --forest-50:  #E6EDE8;
  --forest-100: #C6D4CB;
  --forest-300: #6A8B79;
  --forest-500: #305246;
  --forest-700: #1F3D2D;   /* core brand */
  --forest-900: #0F2418;

  /* Oxblood — accent. Bookmark ribbon. Romance, but adult. */
  --oxblood-100: #F1D9D7;
  --oxblood-300: #C99592;
  --oxblood-500: #9A3A41;   /* core */
  --oxblood-700: #6E2128;
  --oxblood-900: #3F0F14;

  /* Parchment — paper. The page. */
  --parchment-50:  #F6F1E4;   /* canvas */
  --parchment-100: #EFE7D2;   /* surface */
  --parchment-200: #E2D6B8;
  --parchment-300: #C9B98E;

  /* Stone — text & line work. Cool true neutral. */
  --stone-900: #1A1B17;
  --stone-700: #3E3E38;
  --stone-500: #6D6D64;
  --stone-300: #A8A89D;
  --stone-100: #DCDCD2;

  /* Mauve — soft sub-accent. The pressed-flower in the book. */
  --mauve-100: #E8E0E5;
  --mauve-300: #B5A4B0;
  --mauve-500: #7E6A78;

  /* Sage — confirmation. (Not bright; the marginalia tick.) */
  --sage-100: #DDE3CF;
  --sage-500: #6F8F5A;
  --sage-700: #455636;

  /* Status (semantic only) */
  --status-success:  var(--sage-500);
  --status-warning:  #B5832B;
  --status-error:    var(--oxblood-700);
  --status-error-bg: var(--oxblood-100);

  /* ---- Semantic colors ----------------------------------------------- */
  --bg-canvas:   var(--parchment-50);
  --bg-surface:  var(--parchment-100);
  --bg-elevated: #FBF7EC;
  --bg-inverse:  var(--forest-700);

  --fg-primary:   var(--stone-900);
  --fg-secondary: var(--stone-700);
  --fg-muted:     var(--stone-500);
  --fg-on-dark:   var(--parchment-50);
  --fg-on-accent: #FFFFFF;

  --accent:        var(--oxblood-500);
  --accent-hover:  var(--oxblood-700);
  --accent-tint:   var(--oxblood-100);

  --brand:        var(--forest-700);
  --brand-hover:  var(--forest-900);
  --brand-tint:   var(--forest-50);

  --border-hair:   rgba(31,61,45,0.12);
  --border-soft:   rgba(31,61,45,0.22);
  --border-strong: var(--forest-700);

  /* ---- TYPE ----------------------------------------------------------- */
  --font-display: 'Newsreader', 'Lyon Display', 'Tiempos', Georgia, serif;
  --font-body:    'Be Vietnam Pro', ui-sans-serif, system-ui, sans-serif;
  --font-mono:    'DM Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --fs-display-xl: clamp(3rem, 6.5vw, 5.25rem);
  --fs-display-lg: clamp(2.25rem, 4vw, 3.5rem);
  --fs-display-md: clamp(1.75rem, 2.6vw, 2.25rem);
  --fs-h1:      2rem;
  --fs-h2:      1.5rem;
  --fs-h3:      1.125rem;
  --fs-body:    1rem;
  --fs-sm:      0.875rem;
  --fs-xs:      0.75rem;
  --fs-eyebrow: 0.75rem;

  --lh-tight: 1.05;
  --lh-snug:  1.25;
  --lh-body:  1.6;
  --lh-loose: 1.75;
  --tracking-eyebrow: 0.18em;
  --tracking-tight:   -0.02em;
  --tracking-display: -0.025em;

  /* Newsreader variable-font axis defaults */
  --opsz-display: 60;
  --opsz-heading: 24;
  --opsz-body:    16;

  /* ---- SPACING -------------------------------------------------------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  /* ---- RADIUS · square-ish, book-like ------------------------------- */
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   14px;
  --radius-xl:   20px;
  --radius-pill: 999px;

  /* ---- SHADOW · ink-tinted, paper-soft ----------------------------- */
  --shadow-xs:           0 1px 1px  rgba(15,36,24,0.08);
  --shadow-sm:           0 2px 6px  rgba(15,36,24,0.10);
  --shadow-md:           0 10px 24px rgba(15,36,24,0.13);
  --shadow-lg:           0 24px 56px rgba(15,36,24,0.18);
  --shadow-press:        2px 2px 0 var(--forest-700);
  --shadow-press-lg:     4px 4px 0 var(--forest-700);
  --shadow-press-accent: 4px 4px 0 var(--oxblood-500);

  /* ---- MOTION --------------------------------------------------------- */
  --ease-out:    cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.45, 0.05, 0.55, 0.95);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 150ms;
  --dur-base: 240ms;
  --dur-slow: 420ms;
}

/* =========================================================================
   SEMANTIC ELEMENT STYLES
   ========================================================================= */
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: var(--lh-body);
  color: var(--fg-primary);
  background: var(--bg-canvas);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, .h1, h2, .h2, h3, .h3, h4, .h4 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display);
  color: var(--fg-primary);
  text-wrap: balance;
  font-variation-settings: "opsz" var(--opsz-heading);
}
/* Emphasis = real italic of Newsreader (gorgeous swash) — color shifts to forest */
h1 em, h2 em, h3 em, .display em {
  font-style: italic;
  color: var(--forest-700);
  font-weight: 500;
}

h1, .h1 { font-size: var(--fs-h1); }
h2, .h2 { font-size: var(--fs-h2); }
h3, .h3 { font-size: var(--fs-h3); line-height: var(--lh-snug); }

.display-xl { font-family: var(--font-display); font-weight:500; font-size: var(--fs-display-xl); line-height: 0.98; letter-spacing: -0.03em; font-variation-settings:"opsz" 72; }
.display-lg { font-family: var(--font-display); font-weight:500; font-size: var(--fs-display-lg); line-height: 1.02; letter-spacing: -0.025em; font-variation-settings:"opsz" 48; }
.display-md { font-family: var(--font-display); font-weight:500; font-size: var(--fs-display-md); line-height: 1.1;  letter-spacing: -0.02em;  font-variation-settings:"opsz" 32; }

p, .p   { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--fg-secondary); text-wrap: pretty; }
small, .caption { font-size: var(--fs-sm); color: var(--fg-muted); line-height: 1.5; }
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--forest-700);
}

strong, b { font-weight: 600; color: var(--fg-primary); }
em, i { font-style: italic; }
a {
  color: var(--forest-700);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--oxblood-500);
}
a:hover { color: var(--oxblood-500); text-decoration-color: var(--oxblood-500); text-decoration-thickness: 2px; }
code, kbd, samp { font-family: var(--font-mono); font-size: 0.9em; background: var(--parchment-200); padding: 0.1em 0.35em; border-radius: var(--radius-xs); color: var(--forest-900); }

button, input, textarea, select { font-family: inherit; font-size: inherit; color: inherit; }
::selection { background: var(--oxblood-500); color: var(--parchment-50); }

/* The pulsing "Live" word (no dot — bold→regular cycle) */
.live-word {
  animation: liveWeight var(--live-pulse-dur, 2.1s) ease-in-out infinite;
  font-variation-settings: "wght" 500;
}
@keyframes liveWeight {
  0%, 100% { font-weight: 700; opacity: 1; }
  50%      { font-weight: 400; opacity: var(--live-pulse-min-opacity, 0.55); }
}