/* =====================================================================
 * Everlasting Memory — Colors & Type
 * ===================================================================== */

/* fonts loaded via <link> in index.html */

:root {
  --em-ink:           #0E0B08;
  --em-soft-black:    #1C1814;
  --em-charcoal:      #2A241D;

  --em-ivory:         #F6F1E7;
  --em-parchment:     #EFE7D6;
  --em-paper:         #ffffff;
  --em-paper-edge:    #E5DCC6;

  --em-gold:          #C9A24C;
  --em-gold-bright:   #D9B663;
  --em-antique-gold:  #8E6B26;
  --em-gold-veil:     rgba(201, 162, 76, 0.15);

  --em-ash:           #8A8479;
  --em-stone:         #B7B0A1;
  --em-mist:          #D6CFBE;

  --em-success:       #5C7A52;
  --em-info:          #4A6779;
  --em-warning:       #B7833A;
  --em-danger:        #8E3A2E;

  --em-bg:            var(--em-ivory);
  --em-bg-elevated:   var(--em-paper);
  --em-bg-sunken:     var(--em-parchment);
  --em-fg:            var(--em-ink);
  --em-fg-muted:      var(--em-charcoal);
  --em-fg-subtle:     var(--em-ash);
  --em-fg-faint:      var(--em-stone);
  --em-accent:        var(--em-antique-gold);
  --em-rule:          rgba(14, 11, 8, 0.08);
  --em-rule-strong:   rgba(14, 11, 8, 0.16);

  --em-font-display:  'Platypi', Georgia, serif;
  --em-font-body:     'Nata Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --em-font-mono:     ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --em-text-xs:       12px;
  --em-text-sm:       14px;
  --em-text-base:     16px;
  --em-text-md:       18px;
  --em-text-lg:       22px;
  --em-text-xl:       28px;
  --em-text-2xl:      36px;
  --em-text-3xl:      48px;
  --em-text-4xl:      64px;
  --em-text-5xl:      88px;

  --em-space-1:  4px;
  --em-space-2:  8px;
  --em-space-3:  12px;
  --em-space-4:  16px;
  --em-space-5:  24px;
  --em-space-6:  32px;
  --em-space-7:  48px;
  --em-space-8:  64px;
  --em-space-9:  96px;
  --em-space-10: 128px;

  --em-radius-sm:    4px;
  --em-radius-md:    8px;
  --em-radius-lg:    16px;
  --em-radius-pill:  999px;

  --em-shadow-soft:  0 1px 2px rgba(14,11,8,0.04), 0 8px 24px -8px rgba(14,11,8,0.08);
  --em-shadow-lift:  0 4px 8px rgba(14,11,8,0.06), 0 24px 48px -16px rgba(14,11,8,0.16);

  --em-ease:         cubic-bezier(0.2, 0.8, 0.2, 1);
  --em-dur-fast:     140ms;
  --em-dur:          280ms;
  --em-dur-slow:     520ms;
}

.em-on-ink,
[data-em-surface="ink"] {
  --em-bg:            var(--em-ink);
  --em-bg-elevated:   var(--em-soft-black);
  --em-bg-sunken:     #08070A;
  --em-fg:            var(--em-ivory);
  --em-fg-muted:      var(--em-mist);
  --em-fg-subtle:     var(--em-stone);
  --em-fg-faint:      var(--em-ash);
  --em-accent:        var(--em-gold);
  --em-rule:          rgba(201, 162, 76, 0.15);
  --em-rule-strong:   rgba(201, 162, 76, 0.32);
}

.em-eyebrow {
  font-family: var(--em-font-display);
  font-weight: 600;
  font-size: var(--em-text-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--em-accent);
  line-height: 1.4;
}

.em-display {
  font-family: var(--em-font-display);
  font-weight: 500;
  font-size: var(--em-text-5xl);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--em-fg);
  text-wrap: balance;
}

.em-h1 {
  font-family: var(--em-font-display);
  font-weight: 500;
  font-size: var(--em-text-3xl);
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--em-fg);
  text-wrap: balance;
  margin-top: 1rem;
}

.em-h2 {
  font-family: var(--em-font-display);
  font-weight: 500;
  font-size: var(--em-text-2xl);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--em-fg);
  text-wrap: balance;
}

.em-h3 {
  font-family: var(--em-font-display);
  font-weight: 600;
  font-size: var(--em-text-xl);
  line-height: 1.25;
  letter-spacing: -0.005em;
  color: var(--em-fg);
}

.em-h4 {
  font-family: var(--em-font-display);
  font-weight: 600;
  font-size: var(--em-text-lg);
  line-height: 1.3;
  color: var(--em-fg);
}

.em-quote {
  font-family: var(--em-font-display);
  font-style: italic;
  font-weight: 400;
  font-size: var(--em-text-2xl);
  line-height: 1.35;
  color: var(--em-fg);
  text-wrap: pretty;
}

.em-body {
  font-family: var(--em-font-body);
  font-weight: 400;
  font-size: var(--em-text-base);
  line-height: 1.6;
  color: var(--em-fg-muted);
  text-wrap: pretty;
}

.em-body-lg {
  font-family: var(--em-font-body);
  font-weight: 400;
  font-size: var(--em-text-md);
  line-height: 1.6;
  color: var(--em-fg-muted);
  text-wrap: pretty;
}

.em-caption {
  font-family: var(--em-font-body);
  font-weight: 400;
  font-size: var(--em-text-sm);
  line-height: 1.5;
  color: var(--em-fg-subtle);
}

.em-meta {
  font-family: var(--em-font-body);
  font-weight: 500;
  font-size: var(--em-text-xs);
  line-height: 1.4;
  color: var(--em-fg-faint);
  font-feature-settings: "tnum" 1;
}

.em-label {
  font-family: var(--em-font-body);
  font-weight: 500;
  font-size: var(--em-text-sm);
  line-height: 1.4;
  color: var(--em-fg);
  letter-spacing: 0.01em;
}

.em-rule-gold {
  border: 0;
  height: 1px;
  background: var(--em-accent);
  opacity: 0.5;
  margin: var(--em-space-5) 0;
}

::selection {
  background: var(--em-gold);
  color: var(--em-ink);
}