/* =============================================================
   Date Night — Design Tokens
   Colors, type, spacing, radii, shadows.
   ============================================================= */

/* Fonts loaded via Google Fonts. If self-hosting, drop files in fonts/
   and replace the import below. */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,500;1,600;1,700&family=Manrope:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ---------- Brand color ---------- */
  --brand-bordeaux: #8B1A1A;   /* deep — app icon top */
  --brand-red:      #A12727;   /* signature mid */
  --brand-rose:     #C94B4B;   /* warm accent — app icon bottom */
  --brand-blush:    #F5E6E6;   /* pale tint */

  /* ---------- Surfaces ---------- */
  --bg-ivory:  #FAF6F1;        /* primary page background */
  --bg-cream:  #F2EBE0;        /* secondary surface */
  --bg-white:  #FFFFFF;
  --bg-night:  #1A0A0A;        /* almost-black aubergine */

  /* ---------- Ink ---------- */
  --ink:        #1F0E0E;       /* primary text on light */
  --ink-soft:   #5B4A4A;       /* secondary text */
  --ink-faint:  #8E7B7B;       /* tertiary / captions */
  --ink-on-red: #FFFFFF;       /* type on red */
  --ink-on-red-soft: rgba(255,255,255,.78);

  /* ---------- Lines ---------- */
  --line-ink:  rgba(31,14,14,.10);
  --line-strong: rgba(31,14,14,.16);
  --line-on-red: rgba(255,255,255,.14);

  /* ---------- Accent ---------- */
  --gold: #B68A4E;             /* ratings, premium tags */

  /* ---------- Semantic ---------- */
  --color-bg:       var(--bg-ivory);
  --color-surface:  var(--bg-white);
  --color-text:     var(--ink);
  --color-text-soft: var(--ink-soft);
  --color-primary:  var(--brand-red);
  --color-primary-hover: var(--brand-bordeaux);
  --color-primary-press: #6F1414;
  --color-success:  #5E7A4E;   /* warm sage — kept off-cliché */
  --color-warning:  var(--gold);
  --color-danger:   var(--brand-red);

  /* ---------- Type families ---------- */
  --font-display: 'Playfair Display', 'Cormorant Garamond', Georgia, serif;
  --font-body:    'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace;

  /* ---------- Type scale ---------- */
  --fs-display-xl: 72px;       /* hero only */
  --fs-display-lg: 56px;
  --fs-display-md: 40px;
  --fs-display-sm: 32px;
  --fs-h1: 28px;
  --fs-h2: 22px;
  --fs-h3: 18px;
  --fs-body: 16px;
  --fs-small: 14px;
  --fs-caption: 12px;
  --fs-overline: 11px;         /* uppercase tiny labels — used rarely */

  /* ---------- Line heights ---------- */
  --lh-tight:  1.05;            /* display */
  --lh-snug:   1.20;            /* headings */
  --lh-normal: 1.50;            /* body */
  --lh-loose:  1.65;            /* long-form */

  /* ---------- Letter spacing ---------- */
  --tracking-display: -0.02em;
  --tracking-body:    0;
  --tracking-overline: 0.14em;

  /* ---------- Spacing (4pt) ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 40px;
  --space-8: 48px;
  --space-9: 64px;
  --space-10: 80px;
  --space-11: 96px;
  --space-12: 128px;

  /* ---------- Radii ---------- */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  /* ---------- Shadows (warm-tinted) ---------- */
  --shadow-1: 0 1px 2px rgba(31,14,14,.06), 0 1px 0 rgba(31,14,14,.04);
  --shadow-2: 0 10px 30px -8px rgba(139,26,26,.18), 0 4px 12px rgba(31,14,14,.06);
  --shadow-3: 0 24px 60px -16px rgba(139,26,26,.28), 0 8px 24px rgba(31,14,14,.08);
  --shadow-inset: inset 0 0 0 1px rgba(31,14,14,.06);

  /* ---------- Motion ---------- */
  --ease-out-soft: cubic-bezier(.2, .8, .2, 1);
  --ease-in-out:   cubic-bezier(.6, 0, .3, 1);
  --dur-1: 120ms;              /* press */
  --dur-2: 200ms;              /* small UI */
  --dur-3: 320ms;              /* page / sheet */
  --dur-4: 480ms;              /* reveals */

  /* ---------- Gradients ---------- */
  --grad-brand: linear-gradient(180deg, #8B1A1A 0%, #A12727 50%, #AF3B3B 100%);
  --grad-scrim-bottom: linear-gradient(180deg, transparent 0%, rgba(26,10,10,.7) 100%);
  --grad-blush: linear-gradient(180deg, #FAF6F1 0%, #F5E6E6 100%);
}

/* =============================================================
   Semantic element styles — opt in by setting class "dn"
   on a wrapper, OR import these into your root.
   ============================================================= */

.dn, .dn body { font-family: var(--font-body); color: var(--ink); background: var(--bg-ivory); }

.dn h1, .dn .h1 {
  font-family: var(--font-display);
  font-size: var(--fs-display-md);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display);
  font-weight: 600;
  margin: 0 0 var(--space-4);
}
.dn h2, .dn .h2 {
  font-family: var(--font-display);
  font-size: var(--fs-display-sm);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-display);
  font-weight: 600;
  margin: 0 0 var(--space-3);
}
.dn h3, .dn .h3 {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  line-height: var(--lh-snug);
  font-weight: 500;
  margin: 0 0 var(--space-3);
}
.dn h4, .dn .h4 {
  font-family: var(--font-body);
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  font-weight: 600;
  margin: 0 0 var(--space-2);
}
.dn .display {
  font-family: var(--font-display);
  font-size: var(--fs-display-lg);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display);
  font-weight: 600;
}
.dn .display-italic {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
}
.dn p, .dn .body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-loose);
  color: var(--ink);
  margin: 0 0 var(--space-4);
}
.dn .caption {
  font-family: var(--font-body);
  font-size: var(--fs-caption);
  line-height: var(--lh-normal);
  color: var(--ink-soft);
}
.dn .overline {
  font-family: var(--font-body);
  font-size: var(--fs-overline);
  font-weight: 600;
  letter-spacing: var(--tracking-overline);
  text-transform: uppercase;
  color: var(--ink-soft);
}
.dn code, .dn .mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
}