/* =============================================================================
   FORGE612 HOUSE DESIGN SYSTEM — tokens.css  (v1)
   The portable bundle. Every Forge612 product imports THIS file and builds
   from these tokens + classes. Differentiate products by content, sub-accent,
   and imagery — NEVER by changing the type, ground, or components.

   Concept "The Forge": warm-forged dark ground, ember heat as the one accent,
   industrial condensed display, mono for data, sharp geometry. Reads like a
   crafted athletic product, not generic dark SaaS.
   ============================================================================= */
:root{
  /* ---- GROUND + SURFACES (warm, never cold black) ---- */
  --f-ground:#121016;        /* page base, warm near-black (cooling metal) */
  --f-ground-2:#19151F;      /* raised band */
  --f-surface:#201B28;       /* card */
  --f-surface-2:#2A2433;     /* card hover / inset */
  --f-line:rgba(241,236,230,.10);
  --f-line-2:rgba(241,236,230,.20);

  /* ---- EMBER (the one accent — forge heat) ---- */
  --f-ember:#FF6A2B;
  --f-ember-hot:#FF8C44;
  --f-ember-deep:#C7410F;
  --f-ember-wash:rgba(255,106,43,.12);

  /* ---- TEXT (warm) ---- */
  --f-chalk:#F1ECE6;         /* primary text, warm off-white */
  --f-smoke:#9C938F;         /* secondary */
  --f-ash:#6A6470;           /* tertiary */
  --f-dim:#433E4A;           /* faint / ghost numerals */

  /* ---- SEMANTIC (use sparingly, never as brand color) ---- */
  --f-live:#FF3B3B;          /* live / urgent (GameTriq scores) */
  --f-good:#46C08A;          /* success / verified */

  /* ---- TYPE FAMILIES ---- */
  --f-display:'Anton',Impact,'Arial Narrow Bold',sans-serif;  /* stamped, forged */
  --f-ui:'Space Grotesk',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --f-mono:'Space Mono','JetBrains Mono',ui-monospace,monospace;  /* data / readouts */

  /* ---- TYPE SCALE ---- */
  --f-fs-eyebrow:11px;  --f-ls-eyebrow:.20em;
  --f-fs-body:15px;     --f-lh-body:1.55;
  --f-fs-h3:22px; --f-fs-h2:34px; --f-fs-h1:54px; --f-fs-mega:84px;

  /* ---- GEOMETRY (forged, not soft-SaaS) ---- */
  --f-r-sm:8px; --f-r:12px; --f-r-lg:18px;

  /* ---- MOTION (decisive, weighty) ---- */
  --f-ease:cubic-bezier(.32,.72,0,1);
  --f-dur:.5s;

  /* ---- ELEVATION + SIGNATURE GLOW ---- */
  --f-shadow:0 20px 55px -28px rgba(0,0,0,.75);
  --f-glow:0 12px 40px -14px rgba(255,106,43,.45);
}

/* ============================ BASE ============================ */
.f-display{font-family:var(--f-display);font-weight:400;text-transform:uppercase;line-height:.9;letter-spacing:.01em}
.f-eyebrow{font-family:var(--f-ui);font-size:var(--f-fs-eyebrow);letter-spacing:var(--f-ls-eyebrow);
  text-transform:uppercase;font-weight:700;color:var(--f-ember)}
.f-eyebrow .sub{color:var(--f-ash)}
.f-mono{font-family:var(--f-mono)}
.f-data{font-family:var(--f-mono);font-weight:700;letter-spacing:.02em}

/* ============================ BUTTONS ============================ */
.f-btn{font-family:var(--f-ui);font-size:12px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  padding:13px 20px;border-radius:var(--f-r);border:none;cursor:pointer;display:inline-flex;align-items:center;gap:8px;
  transition:transform .12s var(--f-ease),background .2s,box-shadow .2s}
.f-btn:active{transform:scale(.975)}
.f-btn--primary{background:var(--f-ember);color:#190a03;box-shadow:var(--f-glow)}
.f-btn--primary:hover{background:var(--f-ember-hot)}
.f-btn--ghost{background:transparent;color:var(--f-chalk);border:1px solid var(--f-line-2)}
.f-btn--ghost:hover{border-color:var(--f-ember);color:var(--f-ember)}

/* ============================ TAGS / BADGES ============================ */
.f-tag{display:inline-flex;align-items:center;gap:7px;font-family:var(--f-ui);font-size:10px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;padding:5px 11px;border-radius:99px;
  background:var(--f-ember-wash);color:var(--f-ember);border:1px solid rgba(255,106,43,.28)}
.f-tag--live{background:rgba(255,59,59,.12);color:var(--f-live);border-color:rgba(255,59,59,.3)}
.f-tag--live::before{content:"";width:6px;height:6px;border-radius:99px;background:var(--f-live)}

/* ============================ CARD + SIGNATURE GLOW ============================ */
.f-card{position:relative;background:linear-gradient(180deg,var(--f-surface),var(--f-ground-2));
  border:1px solid var(--f-line);border-radius:var(--f-r-lg);overflow:hidden}
.f-glow::before{content:"";position:absolute;right:-40px;top:-40px;width:160px;height:160px;pointer-events:none;
  background:conic-gradient(from 200deg,rgba(255,106,43,.30),transparent 55%);border-radius:50%;filter:blur(2px)}

/* ============================ INPUT ============================ */
.f-input{width:100%;background:var(--f-ground);border:1px solid var(--f-line-2);color:var(--f-chalk);
  font-family:var(--f-ui);font-size:16px;padding:13px 14px;border-radius:var(--f-r)}
.f-input:focus{outline:none;border-color:var(--f-ember)}

/* ============================ HELPERS ============================ */
.f-grain::after{content:"";position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}