/* ============================================================
   Corvue Design System — Shared Components
   Drop-in production-ready patterns: reset, layout, sections,
   buttons, chips, status pills, overline. Uses tokens from
   colors_and_type.css.
   ============================================================ */

/* ── Global reset & baselines ──────────────────────────────
   Intentionally narrow — respect whatever normalize.css the
   consumer site brings in, but enforce box-sizing + motion
   preferences everywhere. */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

img, svg, video { display: block; max-width: 100%; }
button { font-family: inherit; }

::selection { background: var(--accent-100); color: var(--ink-0); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── Layout ────────────────────────────────────────────────
   Two canonical max-widths: content (1120px) and wide (1280px).
   Horizontal padding defaults to 48px desktop, narrows on mobile. */
.container      { max-width: var(--maxw-content); margin: 0 auto; padding: 0 48px; }
.container-wide { max-width: var(--maxw-wide);    margin: 0 auto; padding: 0 48px; }

@media (max-width: 1024px) {
  .container, .container-wide { padding-left: 32px; padding-right: 32px; }
}
@media (max-width: 680px) {
  .container, .container-wide { padding-left: 20px; padding-right: 20px; }
}

/* Flex/stack utilities */
.stack   { display: flex; flex-direction: column; }
.row     { display: flex; flex-direction: row; align-items: center; }
.gap-8   { gap: 8px; }
.gap-16  { gap: 16px; }
.gap-24  { gap: 24px; }
.gap-32  { gap: 32px; }
.gap-48  { gap: 48px; }

/* ── Sections ──────────────────────────────────────────────
   Vertical rhythm + surface variants. Pair with `.section-head`
   for a canonical overline → h2 → lede block. */
.section         { padding: 140px 0; position: relative; }
.section-tight   { padding: 96px 0; }
.section-alt     { background: var(--paper-2); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.section-sunk    { background: var(--paper-0); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.section-dark    { background: var(--ink-0); color: var(--paper-1); }
.section-dark .overline { color: rgba(253, 252, 249, 0.55); }

@media (max-width: 1024px) { .section { padding: 112px 0; } }
@media (max-width: 680px)  { .section { padding: 88px  0; } }

.section-head           { margin-bottom: 72px; max-width: 64ch; }
.section-head .overline { margin-bottom: 18px; }
.section-head h2        { margin: 0 0 18px; }
.section-head p.lede    { margin: 0; }

@media (max-width: 680px) { .section-head { margin-bottom: 48px; } }

/* ── Buttons ───────────────────────────────────────────────
   `.btn` is the base. Variants stack (`.btn .btn-primary .btn-lg`).
   Ember CTA is the one-per-screen primary — use sparingly. */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 20px;
  border-radius: 8px;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  border: 1px solid transparent;
  transition:
    background   var(--dur-2) var(--ease-out),
    color        var(--dur-2) var(--ease-out),
    border-color var(--dur-2) var(--ease-out),
    transform    var(--dur-1) var(--ease-out);
  text-decoration: none;
}
.btn:focus-visible { outline: none; box-shadow: var(--ring-focus); }
.btn:active        { transform: scale(0.985); }
.btn[disabled], .btn.is-disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; }

.btn-primary {
  background: var(--accent-500);
  color: var(--accent-fg);
  box-shadow:
    0 1px 0 rgba(30, 28, 20, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.btn-primary:hover { background: var(--accent-600); color: var(--accent-fg); }

.btn-secondary {
  background: var(--paper-0);
  color: var(--ink-1);
  border-color: var(--ink-5);
}
.btn-secondary:hover { border-color: var(--ink-2); color: var(--ink-0); }

.btn-ghost {
  background: transparent;
  color: var(--ink-1);
  padding: 11px 8px;
}
.btn-ghost:hover { color: var(--accent); }

.btn-dark {
  background: transparent;
  color: var(--paper-1);
  border-color: rgba(253, 252, 249, 0.24);
}
.btn-dark:hover { border-color: rgba(253, 252, 249, 0.5); color: var(--paper-0); }

.btn-danger {
  background: transparent;
  color: var(--danger);
  border-color: #E4BFB9;
}
.btn-danger:hover { background: rgba(181, 58, 43, 0.06); border-color: var(--danger); }

.btn-lg { padding: 14px 26px; font-size: 16px; border-radius: 10px; }
.btn-sm { padding:  7px 14px; font-size: 13px; border-radius: 6px; }

/* Arrow slide on primary CTAs that carry a trailing SVG.
   Works with arrow icons rendered inline (e.g. a right-arrow). */
.btn-primary svg { transition: transform var(--dur-2) var(--ease-out); }
.btn-primary:hover svg,
.btn-primary:focus-visible svg { transform: translateX(2px); }

/* ── Chip ──────────────────────────────────────────────────
   Small mono label for feature keywords, filters, tags. */
.chip {
  font-size: 11.5px;
  font-family: var(--font-mono);
  padding: 4px 9px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--ink-2);
  background: var(--paper-1);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* ── Status pill (dot + label) ─────────────────────────────
   Muted semantic pill. Add `.dot-pulse-*` from interactions.css
   to `.s-dot` for a breathing animation. */
.status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid transparent;
  line-height: 1.4;
  white-space: nowrap;
}
.status .s-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }

.status.live     { color: #2B5A40; background: #E8F1EC; border-color: #D6E4DC; }
.status.live     .s-dot { background: var(--success); box-shadow: 0 0 0 3px rgba(63, 125, 91, 0.18); }

.status.active   { color: #8A6106; background: #FBF3DF; border-color: #F0E3BD; }
.status.active   .s-dot { background: var(--warning); }

.status.running  { color: #B23600; background: #FEF1EC; border-color: #FDDCCD; }
.status.running  .s-dot { background: var(--accent-500); }

.status.dev      { color: #2F4F6B; background: #E7EEF5; border-color: #CDDBE8; }
.status.dev      .s-dot { background: var(--info); }

.status.coming   { color: var(--ink-3); background: var(--paper-2); border-color: var(--border); }
.status.coming   .s-dot { background: var(--ink-4); }

/* ── Arrow link ────────────────────────────────────────────
   Ink text with hairline underline that warms on hover. Pair
   with `.arrow-glyph` from interactions.css to slide the arrow. */
.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-0);
  border-bottom: 1px solid var(--ink-5);
  padding-bottom: 2px;
  transition:
    color var(--dur-2) var(--ease-out),
    border-color var(--dur-2) var(--ease-out);
  text-decoration: none;
}
.arrow-link:hover { color: var(--accent); border-bottom-color: var(--accent); }

/* ── Overline with ember dash ──────────────────────────────
   Optional decorator for the base `.overline` label — adds a short
   ember bar to the left. Use by adding both classes: `.overline.ember-dash`. */
.overline.ember-dash {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.overline.ember-dash::before {
  content: "";
  width: 14px;
  height: 1px;
  background: var(--accent-500);
  display: inline-block;
}