/* =========================================================================
   Elision · Readr — Colors & Typography
   Source of truth: brand book (uploads/elision-readr-brand-book.html)

   The brand lives in contrast, not ambiguity. Dark is primary. Warm
   off-white replaces pure white everywhere. Candlelight is the only
   accent — let it earn attention through scarcity.
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;1,300&family=DM+Sans:wght@300;400;500&display=swap');

:root {
  /* -------- Primary palette ---------- */
  --void:         #0F0D0B;   /* Primary dark bg — "the dark room the word appears in" */
  --surface:      #191512;   /* Cards, panels, elevated UI in dark mode */
  --page:         #EDE8E0;   /* Primary text on dark; light-mode bg. Warm off-white */
  --candlelight:  #C9922A;   /* Sole accent. Separators, highlights, interactive */

  /* -------- Secondary palette (pulled from the flame) -------- */
  --wick:         #3A4858;   /* Cool blue-grey — flame base, informational UI */
  --ember:        #8A3015;   /* Dark red-orange — depth, shadow, receding */
  --flame:        #C85C20;   /* Deep orange — CTAs, forward momentum */
  --flare:        #F0D070;   /* Bright core — highlight, active word, arrival */

  /* -------- Dark mode tones (primary) -------- */
  --dark-bg:        #0F0D0B;
  --dark-surface:   #191512;
  --dark-border:    #252220;
  --dark-text:      #EDE8E0;
  --dark-muted:     #8A8480;
  --dark-dim:       #5A5650;

  /* -------- Light mode tones (secondary) -------- */
  --light-bg:       #EDE8E0;
  --light-surface:  #E2DDD5;
  --light-border:   #D8D3CB;
  --light-text:     #0F0D0B;
  --light-muted:    #7A7570;

  /* -------- Semantic foreground/background (dark mode default) -------- */
  --bg:        var(--dark-bg);
  --bg-elev:   var(--dark-surface);
  --fg:        var(--dark-text);     /* primary text */
  --fg-muted:  var(--dark-muted);    /* secondary text */
  --fg-dim:    var(--dark-dim);      /* tertiary / eyebrow */
  --border:    var(--dark-border);
  --accent:    var(--candlelight);
  --cta:       var(--flame);

  /* -------- Status colours -------- */
  --color-danger: #e74c3c;   /* Error / destructive — dark surfaces. Brighter for legibility */

  /* -------- Typography families -------- */
  --font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-body:    'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* -------- Type scale (spec) -------- */
  --fs-display:   52px;   /* Cormorant 300 */
  --fs-h1:        36px;   /* Cormorant 300 */
  --fs-h2:        24px;   /* Cormorant 400 */
  --fs-lead:      18px;   /* DM Sans 300 */
  --fs-body:      14px;   /* DM Sans 400 */
  --fs-small:     12px;   /* DM Sans 400 */
  --fs-eyebrow:   10px;   /* DM Sans 500 UC */

  /* -------- Spacing -------- */
  --sp-1:   4px;
  --sp-2:   8px;
  --sp-3:   12px;
  --sp-4:   16px;
  --sp-5:   24px;
  --sp-6:   32px;
  --sp-7:   48px;
  --sp-8:   64px;
  --sp-9:   80px;

  /* -------- Radii -------- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;

  /* -------- Borders -------- */
  --hairline: 0.5px solid var(--border);   /* brand uses hairlines, not 1px */

  /* -------- Motion -------- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast:  150ms;
  --dur-base:  200ms;
  --dur-slow:  300ms;
}

/* -------- Light-mode opt-in via [data-theme="light"] -------- */
[data-theme="light"] {
  --bg:           var(--light-bg);
  --bg-elev:      var(--light-surface);
  --fg:           var(--light-text);
  --fg-muted:     var(--light-muted);
  --fg-dim:       var(--light-muted);
  --border:       var(--light-border);
  --color-danger: #c0392b;   /* Error / destructive — light surfaces. Richer red */
}

/* =========================================================================
   Semantic element styles — use these, don't reinvent
   ========================================================================= */

.e-display {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--fs-display);
  line-height: 1.15;
  letter-spacing: 0.02em;
  color: var(--fg);
}

.e-h1 {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--fs-h1);
  line-height: 1.2;
  letter-spacing: 0.02em;
  color: var(--fg);
}

.e-h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-h2);
  line-height: 1.3;
  color: var(--fg);
}

.e-lead {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: var(--fg);
}

.e-body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: 1.75;
  color: var(--fg-muted);
}

.e-small {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--fg-muted);
}

.e-eyebrow {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-dim);
}

.e-accent { color: var(--candlelight); }

/* =========================================================================
   Brand primitives — dot, rule, wordmark
   ========================================================================= */

.e-dot {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--candlelight);
  vertical-align: middle;
}

.e-rule {
  display: inline-block;
  width: 28px; height: 1px;
  background: var(--candlelight);
  vertical-align: middle;
}

.e-wordmark {
  font-family: var(--font-display);
  font-weight: 300;
  letter-spacing: 0.04em;
  color: var(--fg);
}
.e-wordmark .sep { color: var(--candlelight); }

/* =========================================================================
   Foundational card + surface
   ========================================================================= */

.e-card {
  background: var(--bg-elev);
  border: var(--hairline);
  border-radius: var(--radius-md);
  padding: var(--sp-5);
}

.e-card-sm { padding: var(--sp-4) var(--sp-5); }

/* =========================================================================
   Core interactives
   ========================================================================= */

.e-btn {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-body);
  padding: 12px 24px;
  border-radius: var(--radius-md);
  border: var(--hairline);
  background: transparent;
  color: var(--fg);
  cursor: pointer;
  transition: opacity var(--dur-base) var(--ease),
              background var(--dur-base) var(--ease);
}
.e-btn:hover   { opacity: 0.82; }
.e-btn:active  { opacity: 0.7; transform: scale(0.995); }

.e-btn-cta {
  background: var(--flame);
  border-color: var(--flame);
  color: var(--page);
}
.e-btn-cta:hover { background: var(--ember); border-color: var(--ember); opacity: 1; }

.e-btn-ghost {
  background: transparent;
  color: var(--fg-muted);
  border-color: var(--border);
}