/*
 * eggb-theme-magazine.css — EggBlocks magazine theme
 *
 * Elegant weight-400, optional serif labels.
 * Warm palette with generous leading — minimal, refined.
 *
 * Color philosophy:
 *   - Warm neutrals: creamy surface, soft borders
 *   - Light typography weight (400) — elegant, not heavy
 *   - Generous line-height for readability
 *   - Accent: muted indigo — sophisticated, understated
 *   - Optional serif on badge labels only, body stays system-ui
 *
 * Link AFTER eggb-base.css.
 */

/* ─────────────────────────────────────────────
   Root-level token fallbacks
───────────────────────────────────────────── */

:root {
  --eggb-text-muted:    #6b7280;
  --eggb-text-xs:       .6875rem;
  --eggb-text-sm:       .875rem;
  --eggb-text-md:       1.0625rem;
  --eggb-text-lg:       1.75rem;
  --eggb-sh-title-size: 1.25rem;
}

/* ─────────────────────────────────────────────
   Token overrides on .eggb-block
───────────────────────────────────────────── */

.eggb-block {
  /* Accent: muted indigo — sophisticated, understated */
  --eggb-accent:     #4f46e5;

  /* Surface: creamy warm white */
  --eggb-surface:    #faf9f7;

  /* Border: warm, very subtle hairline */
  --eggb-border:     rgba(28, 20, 10, .08);

  /* Muted text: warm gray */
  --eggb-text-muted: #6b7280;

  /* Shape — soft rounding */
  --eggb-radius:      4px;
  --eggb-radius-chip: 4px;
  --eggb-border-w:    1px;

  /* Generous inner padding */
  --eggb-block-pad:   1.25rem 1.375rem;

  /* Signal colors — muted for elegance */
  --eggb-positive: #2d6a4f;
  --eggb-negative: #9b2335;

  /* Editorial type colors */
  --eggb-note:    #4f46e5;
  --eggb-tip:     #2d6a4f;
  --eggb-warning: #92400e;
  --eggb-insight: #6f42c1;

  /* Text color */
  --eggb-text: #1c1917;
  color: var(--eggb-text);

  /* Type scale */
  --eggb-text-xs:     .6875rem;
  --eggb-text-sm:     .875rem;
  --eggb-text-md:     1.0625rem;
  --eggb-text-lg:     1.75rem;

  /* Section header */
  --eggb-sh-title-size: 1.25rem;
}

/* ─────────────────────────────────────────────
   Typography — light weight, generous leading
───────────────────────────────────────────── */

.eggb-theme-magazine .eggb-section-title {
  font-weight: 400;
  letter-spacing: .01em;
  line-height: 1.5;
}

.eggb-theme-magazine .eggb-score-num {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  letter-spacing: -.04em;
}

/* Product / verdict title — elegant, not heavy */
.eggb-theme-magazine .eggb-vd-name {
  font-weight: 400;
  line-height: 1.5;
}

/* ─────────────────────────────────────────────
   Button — refined, light
───────────────────────────────────────────── */

.eggb-theme-magazine .eggb-btn {
  font-size:      .8125rem;
  font-weight:    500;
  letter-spacing: .02em;
  padding:        .5em 1.2em;
}

/* ─────────────────────────────────────────────
   Chip — warm, understated
───────────────────────────────────────────── */

.eggb-theme-magazine .eggb-chip {
  --eggb-chip-bg:     transparent;
  --eggb-chip-border: rgba(28, 20, 10, .22);
  --eggb-chip-color:  rgba(28, 20, 10, .70);
  font-size:   .75rem;
  font-weight: 400;
}

/* ─────────────────────────────────────────────
   Award badge — optional serif label
───────────────────────────────────────────── */

.eggb-theme-magazine .eggb-award {
  --eggb-award-bg:     color-mix(in srgb, var(--eggb-accent) 10%, transparent);
  --eggb-award-border: color-mix(in srgb, var(--eggb-accent) 28%, transparent);
  --eggb-award-color:  var(--eggb-accent);
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size:   .6875rem;
  font-weight: 400;
  letter-spacing: .02em;
}

/* Label — optional serif for magazine feel */
.eggb-theme-magazine .eggb-label {
  font-family: Georgia, "Times New Roman", Times, serif;
  letter-spacing: .04em;
}

/* ─────────────────────────────────────────────
   Score
───────────────────────────────────────────── */

.eggb-theme-magazine .eggb-score-num {
  font-size:      2.25rem;
}

.eggb-theme-magazine .eggb-score-denom {
  opacity: .5;
}

/* ─────────────────────────────────────────────
   Price primitives
───────────────────────────────────────────── */

.eggb-theme-magazine .eggb-price-old,
.eggb-theme-magazine .eggb-price-meta {
  color: var(--eggb-text-muted);
}

.eggb-theme-magazine .eggb-price-old {
  font-size: var(--eggb-text-sm);
}

.eggb-theme-magazine .eggb-price-meta {
  font-size: var(--eggb-text-xs);
}

/* ─────────────────────────────────────────────
   Rule — soft
───────────────────────────────────────────── */

.eggb-theme-magazine .eggb-rule {
  opacity: .08;
}

/* ─────────────────────────────────────────────
   Block panel
───────────────────────────────────────────── */

.eggb-theme-magazine.eggb-block--panel {
  background:    var(--eggb-surface);
  border:        var(--eggb-border-w) solid var(--eggb-border);
  border-radius: var(--eggb-radius);
}

.eggb-theme-magazine.eggb-block--accented {
  border-top: 3px solid var(--eggb-accent);
}

.eggb-theme-magazine .eggb-card {
  background:    var(--eggb-surface);
  border:        var(--eggb-border-w) solid var(--eggb-border);
  border-radius: var(--eggb-radius);
}

.eggb-theme-magazine .eggb-divider-v {
  width:       1px;
  background:  currentColor;
  opacity:     .10;
  flex-shrink: 0;
}