/* tokens.css — GangNest brand tokens.
 *
 * COPIED by hand from the product's design system so the marketing site matches the app
 * pixel-for-pixel WITHOUT importing any app code (the site and app are deliberately decoupled — if
 * the app's tokens change, these are updated on purpose, not automatically). Source at copy time:
 *   • apps/web/src/index.css                         (light theme tokens, glass, accent gradient)
 *   • packages/builder-ui/src/storefront/styles.css  (.stage dark studio, --sheet-*, film sheen)
 */

/* Self-hosted Inter Variable (Latin axis) — no CDN, GDPR-safe, one 47 KB file covers 100–900. */
@font-face {
  font-family: "Inter Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("../fonts/inter-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
    U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF,
    U+FFFD;
}

:root {
  /* ── Light surface — the airy marketing sections ── */
  --bg: #eef1f6;
  --surface: #ffffff;
  --elevated: #ffffff;
  --line: #e3e8ef;
  --fg: #0b1220;
  --muted: #5b6675;
  --accent: #0d9f6e; /* emerald */
  --accent2: #0fb6a6; /* teal */
  --success: #10b981;
  --warn: #f59e0b;
  --danger: #f43f5e;
  --ring: color-mix(in oklab, var(--accent) 45%, transparent);
  --shadow: 0 1px 2px rgb(15 23 42 / 0.04), 0 8px 24px -12px rgb(15 23 42 / 0.18);
  --shadow-lg: 0 2px 6px rgb(15 23 42 / 0.06), 0 24px 48px -20px rgb(15 23 42 / 0.28);
  --checker: #dbe2ec;

  /* The DTF film sheet stays a light surface in every context so ink pops (used by both stages). */
  --sheet-surface: #f7f9fc;
  --sheet-checker: #dde4ee;
  --sheet-glow:
    0 0 0 1px rgba(15, 23, 42, 0.06),
    0 24px 60px -28px rgb(15 23 42 / 0.35);

  /* ── Landing layout scale ── */
  --content: 1180px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 22px;
  --radius-pill: 999px;
  --nav-h: 64px;

  color-scheme: light;
}

/* Dark-studio scope — the film-stage sections (hero, playground, differentiation, final CTA,
 * footer). Direct copy of the app's `.stage` token override: charcoal studio, accent glow overhead,
 * light film sheet. Any element inside .studio that uses a semantic token adapts via the cascade. */
.studio {
  --bg: #14181f;
  --surface: #1d232c;
  --elevated: #232a35;
  --line: rgba(255, 255, 255, 0.09);
  --fg: #e8edf4;
  --muted: #9aa6b6;
  --checker: #2a323e;
  --shadow: 0 1px 2px rgb(0 0 0 / 0.4), 0 12px 32px -12px rgb(0 0 0 / 0.6);
  --shadow-lg: 0 2px 6px rgb(0 0 0 / 0.5), 0 28px 56px -22px rgb(0 0 0 / 0.75);
  --sheet-surface: #f7f9fc;
  --sheet-checker: #dde4ee;
  --sheet-glow:
    0 0 0 1px rgba(255, 255, 255, 0.1),
    0 28px 80px -28px rgb(0 0 0 / 0.85),
    0 0 70px -18px color-mix(in oklab, var(--accent) 30%, transparent);
  color: var(--fg);
  background:
    radial-gradient(120% 90% at 50% 0%, color-mix(in oklab, var(--accent) 8%, transparent), transparent 60%),
    var(--bg);
}

/* ── Brand utilities (copied) ── */
.accent-gradient {
  background-image: linear-gradient(135deg, var(--accent), var(--accent2));
}
.accent-text {
  background-image: linear-gradient(118deg, var(--accent), var(--accent2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.glass {
  background: color-mix(in oklab, var(--surface) 78%, transparent);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
}

/* Film sheen: a slow specular sweep across the sheet, like light catching a glossy DTF roll.
 * Copied keyframes from the app; applied to the canvas stages and frozen by reduced-motion. */
@keyframes gn-sheen {
  0%,
  46% {
    background-position: 130% 0;
  }
  78%,
  100% {
    background-position: -80% 0;
  }
}