/* =====================================================================
   app-v2.css — extends the v2 editorial language across the app shell.

   The home view keeps its own `.landing-v2` scoped styles. These rules
   ride on `body[data-landing-v2]` (now kept set app-wide) to bring the
   rest of the app — dashboard, wizard, saved, settings, modals — onto the
   v2 type/shape vocabulary. The palette already matches (styles.css :root),
   so this is type + square corners + Termina caps, NOT a re-skin.

   Loaded AFTER styles.css and landing-v2.css so it wins the cascade.
   Fonts (StyreneA-v2, Termina-v2) are declared globally in landing-v2.css.
   ===================================================================== */

body[data-landing-v2] {
  --v2-font-display: 'StyreneA-v2', 'Manrope', system-ui, sans-serif;
  --v2-font-tag: 'Termina-v2', 'StyreneA-v2', system-ui, sans-serif;
  --v2-yellow: #eac119;
  --v2-ink: #1d1d1b;
  --v2-cream: #eae4da;
  --v2-muted: rgba(234, 228, 218, 0.6);
  --v2-border: rgba(234, 228, 218, 0.15);
  --v2-border-strong: rgba(234, 228, 218, 0.3);
}

/* ---------- Headings: Styrene display, tighter editorial tracking ----------
   Scoped to the app shell + modals. The .landing-v2 home view keeps its own
   higher-specificity heading rules and is unaffected. */
body[data-landing-v2] #appView :is(h1, h2, h3, h4),
body[data-landing-v2] #appView .section-title,
body[data-landing-v2] .modal :is(h1, h2, h3, h4) {
  font-family: var(--v2-font-display);
  letter-spacing: -0.03em;
  line-height: 1.02;
}

/* ---------- Buttons: Termina wide-caps, square ---------- */
body[data-landing-v2] :is(.btn, .btn-primary, .btn-secondary, .btn-small, .btn-pill) {
  font-family: var(--v2-font-tag);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 13px;
  border-radius: 0;
}
body[data-landing-v2] .btn-primary {
  background: var(--v2-yellow);
  color: var(--v2-ink);
}
body[data-landing-v2] .btn-primary:hover {
  background: var(--v2-cream);
  color: var(--v2-ink);
}
body[data-landing-v2] .btn-secondary {
  background: transparent;
  color: var(--v2-cream);
  border: 1.5px solid var(--v2-border-strong);
}
body[data-landing-v2] .btn-secondary:hover {
  background: var(--v2-cream);
  color: var(--v2-ink);
  border-color: var(--v2-cream);
}
/* Icon-only / utility buttons: square them, but don't impose caps spacing */
body[data-landing-v2] :is(.btn-icon-only, .btn-close, .btn-icon-danger, .btn-copy-field) {
  border-radius: 0;
  letter-spacing: normal;
}

/* ---------- Form controls: square, Termina labels ---------- */
body[data-landing-v2] :is(.form-input, input, select, textarea) {
  border-radius: 0;
}
body[data-landing-v2] .form-label {
  font-family: var(--v2-font-tag);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 11px;
  color: var(--v2-muted);
}

/* ---------- Cards: square ---------- */
body[data-landing-v2] :is(.card, .card-featured) {
  border-radius: 0;
}

/* ---------- Dashboard tiles → editorial square tiles ---------- */
body[data-landing-v2] .dashboard-action-btn {
  border-radius: 0;
  border: 1px solid var(--v2-border);
  transition:
    border-color 120ms ease,
    transform 120ms ease,
    background 120ms ease;
}
body[data-landing-v2] .dashboard-action-btn:hover {
  border-color: var(--v2-yellow);
  transform: translateY(-2px);
}
body[data-landing-v2] .dashboard-icon-wrapper {
  border-radius: 0;
}
body[data-landing-v2] .dashboard-action-btn h2 {
  font-family: var(--v2-font-display);
  letter-spacing: -0.02em;
}

/* ---------- Modals & small UI bits square-off ---------- */
body[data-landing-v2] :is(.modal, .modal-content, .badge, .pill, .tag, .chip) {
  border-radius: 0;
}

/* ---------- Dashboard section title: editorial weight ---------- */
body[data-landing-v2] #appView .section-title {
  letter-spacing: -0.035em;
  line-height: 1;
}


/* ---------- Toasts: square, editorial label ---------- */
body[data-landing-v2] .toast {
  border-radius: 0;
  border-left: 3px solid var(--v2-yellow);
}
body[data-landing-v2] .toast-message {
  font-family: var(--v2-font-display);
}

/* ---------- Empty states: editorial voice ---------- */
body[data-landing-v2] .empty-state {
  border: 1px dashed var(--v2-border-strong);
  border-radius: 0;
}

/* ---------- App header / slide nav: Termina caps ---------- */
body[data-landing-v2] .slide-nav-link-text {
  font-family: var(--v2-font-tag);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 12px;
}

/* ---------- Wizard step indicator ---------- */
body[data-landing-v2] .wizard-step {
  border-radius: 0;
  font-family: var(--v2-font-tag);
  letter-spacing: 0.08em;
}