/**
 * Phase A — derived tokens + foundation overrides.
 * Inputs: 31 DB theme vars from ThemeStyleTag. No new theme keys, no hex literals.
 * — updated at: 2026-07-06 — jarvis (news/magazine UI)
 */

:root {
  /* derived tints/shades — DB vars stay the only inputs */
  --primary-tint-08: color-mix(in srgb, var(--primary-color) 8%, var(--bg-white));
  --primary-tint-16: color-mix(in srgb, var(--primary-color) 16%, var(--bg-white));
  --primary-deep: color-mix(in srgb, var(--primary-color) 65%, var(--dark-color));
  --prose-color: color-mix(in srgb, var(--para-color) 55%, var(--heading-color));

  /* ─── Magazine design language ─────────────────────────────────────────────
   * All tokens derived from existing 31 DB vars via color-mix.
   * No hex literals. No new required DB keys.
   * DB var inputs: --primary-color, --primary-dark, --bg-white, --dark-color,
   *               --grey-color, --border-2
   * ─────────────────────────────────────────────────────────────────────── */
  --paper:    color-mix(in srgb, var(--primary-color) 3%, var(--bg-white));
  --paper-2:  color-mix(in srgb, var(--primary-color) 6%, var(--bg-white));
  --ink:      color-mix(in srgb, var(--primary-dark) 92%, var(--dark-color));
  --ink-soft: color-mix(in srgb, var(--primary-dark) 60%, var(--grey-color));
  --rule:     color-mix(in srgb, var(--primary-color) 14%, var(--border-2));

  /* ─── Editorial type — structural layout constants ──────────────────────────
   * Same tier as h1 { font-size: 45px } in common-style.css — not brand values.
   * --display-font is set by next/font Fraunces loader in app/layout.tsx (vertical-level,
   * same pattern as --body-font / --secondary-font; not a required DB key).
   * ─────────────────────────────────────────────────────────────────────── */
  --font-display: var(--display-font, var(--body-font));
  --hed-tracking: -0.025em;
  --kicker-tracking: 0.12em;

  /* fluid type scale — structural, same category as existing common-style.css h1/h2/h3 */
  --t-display:  clamp(30px, 4vw, 48px);
  --t-section:  clamp(22px, 2.4vw, 30px);
  --t-card:     clamp(17px, 1.4vw, 20px);
  --t-kicker:   13px;
  --t-meta:     12px;

  /* rhythm + shape scale */
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --section-pad: clamp(64px, 9vw, 120px);
  --shadow-1: 0 1px 2px color-mix(in srgb, var(--dark-color) 5%, transparent);
  --shadow-2: 0 8px 24px color-mix(in srgb, var(--primary-dark) 12%, transparent);
  --ease: cubic-bezier(0.2, 0.7, 0.3, 1);

  /* ─── Spacing scale — structural constants for vertical rhythm ───────────
   * Use these instead of hardcoded px gap/margin/padding values.
   * ─────────────────────────────────────────────────────────────────────── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 48px;
  --space-7: 64px;
  --space-8: 96px;

  /* ─── Grid + container constants ─────────────────────────────────────── */
  --container-max: 1280px;
  --container-padding: clamp(16px, 4vw, 40px);
  --grid-gap: clamp(20px, 3vw, 32px);

  /* ─── Additional editorial type tokens ───────────────────────────────── */
  --t-lead: clamp(18px, 1.8vw, 22px);
  --t-body-lg: 17px;

  /* ─── Editorial measure — max line length for long-form body copy ─────── */
  --measure: 68ch;

  /* motion system — structural, not brand values */
  --motion-travel: 28px;
  --motion-dur: 0.6s;
  --motion-ease: cubic-bezier(0.16, 0.84, 0.24, 1);
  --motion-stagger: 90ms;
}

/* --- Primary CTA --- */

.default-btn {
  background: var(--primary-color);
  color: var(--white-color);
  border: 2px solid transparent;
  border-radius: var(--radius-sm);
  padding: 16px 28px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition:
    background-color 0.2s var(--ease),
    border-color 0.2s var(--ease),
    transform 0.2s var(--ease),
    box-shadow 0.2s var(--ease);
}

.default-btn::after {
  content: "→";
  display: inline-block;
  transition: transform 0.2s var(--ease);
}

.default-btn:hover {
  background: var(--primary-deep);
  color: var(--white-color);
  transform: translateY(-1px);
  box-shadow: var(--shadow-2);
}

.default-btn:hover::after {
  transform: translateX(4px);
}

.default-btn::before {
  display: none;
}

.btn-ghost {
  background: transparent;
  color: var(--primary-color);
  border: 1px solid var(--primary-color);
  border-radius: var(--radius-sm);
  padding: 14px 26px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition:
    background-color 0.2s var(--ease),
    color 0.2s var(--ease),
    border-color 0.2s var(--ease);
}

.btn-ghost:hover {
  background: var(--primary-tint-08);
  color: var(--primary-deep);
  border-color: var(--primary-deep);
}

/* Inverted CTA on gradient bands */
.lead-cta-actions .default-btn {
  background: var(--white-color);
  color: var(--primary-color);
  border-color: transparent;
}

.lead-cta-actions .default-btn:hover {
  background: var(--light-primary-color);
  color: var(--primary-deep);
}

.lead-cta-actions .default-btn::after {
  content: none;
}

/* --- Typography scale + editorial font application --- */

h1,
.lead-hero-title,
.lead-page-banner-fallback h1 {
  font-family: var(--font-display);
  font-size: clamp(40px, 5vw, 60px);
  letter-spacing: var(--hed-tracking);
  color: var(--ink, var(--heading-color));
}

h2,
.lead-section-heading .lead-section-title,
.lead-section-heading-block h2 {
  font-family: var(--font-display);
  font-size: clamp(30px, 3.6vw, 42px);
  letter-spacing: var(--hed-tracking);
  color: var(--ink, var(--heading-color));
}

h3 {
  font-family: var(--font-display);
  letter-spacing: var(--hed-tracking);
}

body,
.lead-section-text,
.lead-section-desc {
  font-size: 17px;
  line-height: 1.7;
}

.lead-section-text,
.lead-section-text p,
.lead-prose {
  max-width: 68ch;
  color: var(--prose-color);
}

/* --- Banner — kill hardcoded template hexes --- */

.lead-page-banner-fallback {
  background: linear-gradient(
    135deg,
    var(--primary-dark) 0%,
    var(--primary-color) 55%,
    var(--primary-deep) 100%
  );
}

.lead-section-cta,
.lead-cta-banner-dark {
  background: linear-gradient(
    135deg,
    var(--primary-dark) 0%,
    var(--primary-color) 100%
  );
}

.lead-calculator-wrap::before,
.lead-contact-card::before {
  background: linear-gradient(
    90deg,
    var(--primary-color),
    var(--secondary-color)
  );
}

.lead-nav-dropdown-menu {
  background: var(--bg-white);
}

.lead-nav-dropdown-item.active,
.lead-nav-dropdown-item:hover {
  color: var(--white-color);
}

.lead-content-section .lead-content-text,
.lead-section-text,
.lead-section-features-list li {
  color: var(--prose-color);
}