/* ============================================================
   Edgecraft Landing v3 — shared base (design-system atoms)
   Fonts · reset · type · buttons · pills · badges · matrix ·
   live counter · testimonial marquee · scroll-reveal.
   Layout + variant identity live in each variant's landing.css.
   ============================================================ */

@font-face {
  font-family: "Sora";
  src: url("fonts/Sora-Variable.ttf") format("truetype-variations");
  font-weight: 200 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("fonts/Inter-Variable.ttf") format("truetype-variations");
  font-weight: 100 900; font-style: normal; font-display: swap;
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--font-body);
  font-size: var(--text-base); line-height: var(--text-base--lh);
  color: hsl(var(--foreground-default));
  background: hsl(var(--background-default));
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background var(--duration-hover) var(--ease-out),
              color var(--duration-hover) var(--ease-out);
}
body.menu-open { overflow: hidden; }

::selection { background: hsl(var(--brand-default) / 0.30); }

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: none; }
:focus-visible { outline: 2px solid hsl(var(--brand-500)); outline-offset: 2px; border-radius: 3px; }

h1, h2, h3, h4 {
  font-family: var(--font-heading); font-weight: 600;
  letter-spacing: var(--tracking-tight); line-height: 1.1;
  color: hsl(var(--foreground-default));
}

/* ---- Layout helpers ---- */
.container { width: 100%; max-width: var(--container-max); margin-inline: auto; padding-inline: 24px; }
.hairline { height: 1px; background: hsl(var(--border-default)); border: 0; }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.tnum { font-variant-numeric: tabular-nums; }
.accent { color: hsl(var(--brand-link)); }
[data-theme="dark"] .accent { color: hsl(var(--brand-default)); }

.kicker {
  display: inline-block; font-size: var(--text-sm); font-weight: 600;
  letter-spacing: var(--tracking-widest); text-transform: uppercase;
  color: hsl(var(--brand-link));
}
[data-theme="dark"] .kicker { color: hsl(var(--brand-default)); }

/* two-tone feature copy: lead phrase solid, remainder quieter */
.twotone { color: hsl(var(--foreground-lighter)); }
.twotone .strong { color: hsl(var(--foreground-default)); font-weight: 500; }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 34px; padding-inline: 16px; border-radius: var(--radius-md);
  border: 1px solid hsl(var(--border-button-default));
  background: hsl(var(--background-button-default));
  color: hsl(var(--foreground-default));
  font-size: var(--text-sm); font-weight: 500; white-space: nowrap;
  transition: all var(--duration-hover) var(--ease-out);
}
.btn:hover { border-color: hsl(var(--border-button-hover)); background: hsl(var(--background-surface-100)); }
.btn svg { width: 16px; height: 16px; }

.btn--small { height: 30px; padding-inline: 12px; }
.btn--large { height: 40px; padding-inline: 20px; font-size: var(--text-base); }
.btn--hero  { height: 44px; padding-inline: 24px; font-size: var(--text-base); }
.btn--block { width: 100%; }

.btn--primary {
  background: hsl(var(--brand-500)); color: #fff;
  border-color: hsl(var(--brand-600));
}
[data-theme="dark"] .btn--primary { color: hsl(var(--foreground-default)); border-color: hsl(var(--brand-default) / 0.4); }
.btn--primary:hover { background: hsl(192 85% 34%); border-color: hsl(var(--brand-600)); }
[data-theme="dark"] .btn--primary:hover { background: hsl(192 95% 24%); }

/* hero-accent: bright cyan fill + ink — the one loud CTA, works both themes */
.btn--accent {
  background: hsl(var(--brand-default)); color: hsl(var(--brand-ink));
  border-color: hsl(var(--brand-500)); font-weight: 600;
}
.btn--accent:hover { background: hsl(192 84% 62%); border-color: hsl(var(--brand-500)); }

.btn--ghost { background: transparent; border-color: transparent; color: hsl(var(--foreground-light)); }
.btn--ghost:hover { background: hsl(var(--background-surface-200)); color: hsl(var(--foreground-default)); }

/* ============================================================
   PILL + BADGES
   ============================================================ */
.pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 12px 5px 8px; border-radius: var(--radius-full);
  background: hsl(var(--background-surface-100)); border: 1px solid hsl(var(--border-strong));
  font-size: var(--text-xs); color: hsl(var(--foreground-lighter));
}
.pill .tag {
  display: inline-flex; align-items: center; padding: 2px 8px; border-radius: var(--radius-full);
  background: hsl(var(--brand-default)); color: hsl(var(--brand-ink));
  font-weight: 600; font-size: 11px; letter-spacing: 0.02em;
}
.pill .dot { width: 6px; height: 6px; border-radius: 50%; background: hsl(var(--brand-default)); }

.badge {
  display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px;
  border-radius: var(--radius-full); font-size: var(--text-xs); font-weight: 500;
  border: 1px solid transparent;
}
.badge--info { color: hsl(var(--brand-link)); background: hsl(var(--brand-200)); border-color: hsl(var(--brand-300)); }
.badge--indigo { color: hsl(var(--subaccent-default)); background: hsl(var(--subaccent-200)); border-color: hsl(var(--subaccent-300)); }
.badge--success { color: hsl(var(--success-default)); background: hsl(var(--success-default) / 0.12); border-color: hsl(var(--success-default) / 0.3); }
.badge--success .dot { width: 6px; height: 6px; border-radius: 50%; background: hsl(var(--success-default)); }
.badge--neutral { color: hsl(var(--foreground-lighter)); background: hsl(var(--background-surface-200)); border-color: hsl(var(--border-default)); }

/* ============================================================
   THEME TOGGLE  (icon reflects the *target* theme)
   ============================================================ */
.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: var(--radius-md);
  border: 1px solid hsl(var(--border-button-default)); color: hsl(var(--foreground-light));
  transition: all var(--duration-hover) var(--ease-out);
}
.theme-toggle:hover { background: hsl(var(--background-surface-200)); color: hsl(var(--foreground-default)); }
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: block; }
[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
[data-theme="dark"] .theme-toggle .icon-moon { display: none; }

/* ============================================================
   13x13 MATRIX  (shared product mock)
   ============================================================ */
.matrix {
  display: grid; grid-template-columns: repeat(13, 1fr); gap: 2px;
  aspect-ratio: 1 / 1; width: 100%;
}
.matrix .cell {
  position: relative; display: flex; align-items: center; justify-content: center;
  border-radius: 2px; background: hsl(var(--background-surface-200));
  overflow: hidden; min-height: 0;
}
.matrix .cell span {
  position: relative; z-index: 2; font-size: clamp(6px, 0.62vw, 9px);
  font-weight: 600; letter-spacing: -0.02em; color: hsl(var(--foreground-light));
  font-variant-numeric: tabular-nums;
}
[data-theme="dark"] .matrix .cell span { color: hsl(var(--foreground-light)); }
.matrix .cell .fill { position: absolute; inset: 0; z-index: 1; }
.matrix .cell .fill { background: hsl(var(--brand-default) / 0.85); }        /* push — cyan */
.matrix .cell .fill--call { background: hsl(var(--subaccent-default) / 0.80); } /* call — indigo */
.matrix .cell .fill--fold { background: hsl(var(--foreground-muted) / 0.30); } /* fold — muted */
.matrix .cell .fill--eq { background: hsl(var(--brand-default)); }
.matrix .cell.is-strong span { color: hsl(var(--brand-ink)); }
.matrix .cell.is-eqhot span { color: hsl(var(--brand-ink)); }

.matrix-legend { display: flex; align-items: center; gap: 14px; margin-top: 10px; font-size: var(--text-xs); color: hsl(var(--foreground-lighter)); }
.matrix-legend .key { display: inline-flex; align-items: center; gap: 6px; }
.matrix-legend .swatch { width: 10px; height: 10px; border-radius: 2px; }
.matrix-legend .sw-push { background: hsl(var(--brand-default)); }
.matrix-legend .sw-call { background: hsl(var(--subaccent-default)); }
.matrix-legend .sw-fold { background: hsl(var(--foreground-muted) / 0.4); }

/* segmented control */
.seg { display: inline-flex; padding: 2px; border-radius: var(--radius-md); background: hsl(var(--background-surface-200)); border: 1px solid hsl(var(--border-default)); gap: 2px; }
.seg button {
  padding: 4px 10px; border-radius: 4px; font-size: var(--text-xs); font-weight: 500;
  color: hsl(var(--foreground-lighter)); transition: all var(--duration-default) var(--ease-out);
}
.seg button:hover { color: hsl(var(--foreground-default)); }
.seg button.is-active { background: hsl(var(--background-surface-75)); color: hsl(var(--foreground-default)); box-shadow: var(--shadow-sm); }

/* ============================================================
   ACTION TREE (mock)
   ============================================================ */
.tree { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; font-size: var(--text-xs); }
.tree .node {
  display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: var(--radius-full);
  border: 1px solid hsl(var(--border-default)); background: hsl(var(--background-surface-100));
  color: hsl(var(--foreground-lighter)); white-space: nowrap;
}
.tree .node .act { color: hsl(var(--foreground-muted)); }
.tree .node.is-raise { border-color: hsl(var(--brand-300)); background: hsl(var(--brand-200)); color: hsl(var(--brand-link)); }
.tree .node.is-raise .act { color: hsl(var(--brand-link)); }
.tree .node.is-active { border-color: hsl(var(--brand-500)); background: hsl(var(--brand-default)); color: hsl(var(--brand-ink)); font-weight: 600; }
.tree .sep { color: hsl(var(--foreground-muted)); }
[data-theme="dark"] .tree .node.is-raise { color: hsl(var(--brand-default)); }
[data-theme="dark"] .tree .node.is-raise .act { color: hsl(var(--brand-default)); }

/* playing-card chips */
.cards { display: inline-flex; gap: 4px; }
.pcard { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 26px; padding: 0 4px;
  border-radius: 4px; border: 1px solid hsl(var(--border-strong)); background: hsl(var(--background-surface-75));
  font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 600; color: hsl(var(--foreground-default)); }
.pcard.red { color: hsl(var(--destructive-default)); }

/* ============================================================
   LIVE SERVER-HOURS COUNTER
   ============================================================ */
.hours-counter { font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.hours-counter [data-hc-frac] { color: hsl(var(--brand-link)); font-weight: 500; }
[data-theme="dark"] .hours-counter [data-hc-frac] { color: hsl(var(--brand-default)); }

/* ============================================================
   TESTIMONIAL MARQUEE
   ============================================================ */
.marquee-viewport { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.marquee-track { display: flex; gap: 20px; width: max-content; }
.marquee-track.is-running { animation: marquee 46s linear infinite; }
.marquee-track.is-running:hover { animation-play-state: paused; }
.marquee-track.is-static { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 8px; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ============================================================
   SCROLL REVEAL
   ============================================================ */
[data-reveal] { opacity: 0; transform: translateY(14px); transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out); }
[data-reveal].is-in { opacity: 1; transform: none; }
[data-reveal][data-reveal-delay="1"] { transition-delay: 0.06s; }
[data-reveal][data-reveal-delay="2"] { transition-delay: 0.12s; }
[data-reveal][data-reveal-delay="3"] { transition-delay: 0.18s; }
[data-reveal][data-reveal-delay="4"] { transition-delay: 0.24s; }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
}