/* ============================================================
   go-FWD · Design Tokens (matched to production codebase)
   Source: final/assets/css/styles.css
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap");

/* -------- ICON FONT · Font Awesome 6 -------- */
@font-face {
  font-family: "Font Awesome 6 Free";
  font-style: normal; font-weight: 900; font-display: block;
  src: url("fonts/fa-solid-900.ttf") format("truetype");
}
@font-face {
  font-family: "Font Awesome 6 Free";
  font-style: normal; font-weight: 400; font-display: block;
  src: url("fonts/fa-regular-400.ttf") format("truetype");
}
@font-face {
  font-family: "Font Awesome 6 Brands";
  font-style: normal; font-weight: 400; font-display: block;
  src: url("fonts/fa-brands-400.ttf") format("truetype");
}
.fa, .fa-solid, .fa-regular, .fa-brands {
  font-style: normal; font-variant: normal; text-rendering: auto;
  line-height: 1; display: inline-block; -webkit-font-smoothing: antialiased;
}
.fa-solid, .fas   { font-family: "Font Awesome 6 Free"; font-weight: 900; }
.fa-regular, .far { font-family: "Font Awesome 6 Free"; font-weight: 400; }
.fa-brands, .fab  { font-family: "Font Awesome 6 Brands"; font-weight: 400; }

:root {
  /* -------- BRAND PALETTE (from production) -------- */
  --c-bg:            #0a0a0a;
  --c-bg-warm:       #0d0c0e;
  --c-surface:       #141416;
  --c-surface-hover: #1a1a1e;
  --c-border:        rgba(255,255,255,.06);
  --c-border-hover:  rgba(255,255,255,.12);
  --c-text:          #ededf0;
  --c-text-sub:      #8a8a9a;
  --c-text-muted:    #4e4e5c;

  /* Accent — indigo / violet / cyan triad */
  --c-accent:         #6366f1;
  --c-accent-light:   #818cf8;
  --c-accent-bright:  #a78bfa;
  --c-cyan:           #06b6d4;
  --c-amber:          #f59e0b;
  --c-green:          #22c55e;

  --gradient-accent: linear-gradient(135deg, #6366f1 0%, #a78bfa 40%, #06b6d4 100%); /* @kind color */
  --gradient-text:   linear-gradient(135deg, #c7d2fe 0%, #ddd6fe 35%, #a5f3fc 100%);

  /* aliases for prior token names so old preview cards still resolve */
  --bg: var(--c-bg);
  --bg-raised: var(--c-bg-warm);
  --surface: var(--c-surface);
  --border: var(--c-border);
  --border-soft: var(--c-border);
  --fg: var(--c-text);
  --fg-2: var(--c-text-sub);
  --fg-3: var(--c-text-muted);
  --fg-mute: var(--c-text-muted);
  --accent: var(--c-accent);
  --accent-fg: #fff;
  --link: var(--c-accent-light);
  --focus-ring: var(--c-accent-light);
  --warning: var(--c-amber);
  --success: var(--c-green);

  /* legacy lime aliases now point to indigo so any leftover refs resolve */
  --fwd-lime: var(--c-accent);
  --fwd-lime-deep: #4f52e0;
  --fwd-lime-soft: #c7d2fe;
  --fwd-blue: var(--c-cyan);
  --fwd-coral: var(--c-amber);

  /* ink scale (kept for preview cards) */
  --ink-0: #0a0a0a; --ink-1: #141416; --ink-2: #1a1a1e; --ink-3: #2a2a30;
  --ink-4: #4e4e5c; --ink-5: #6e6e7a; --ink-6: #8a8a9a; --ink-7: #b3b3bf;
  --ink-8: #d2d2d8; --ink-9: #ededf0; --ink-10: #f7f7f9;

  /* radii */
  --radius-s:    6px;
  --radius-m:    12px;
  --radius-l:    20px;
  --radius-xl:   32px;
  --radius-pill: 9999px;
  --r-sm: 6px; --r-md: 12px; --r-lg: 20px; --r-xl: 32px; --r-2xl: 32px; --r-pill: 9999px;

  /* motion */
  --ease-out:    cubic-bezier(.16,1,.3,1); /* @kind other */
  --ease-spring: cubic-bezier(.34,1.56,.64,1); /* @kind other */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
  --dur-fast: .15s; /* @kind other */
  --dur:      .4s; /* @kind other */
  --dur-base: .4s; /* @kind other */
  --dur-slow: .8s; /* @kind other */

  /* type */
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Space Grotesk', 'Inter', sans-serif;
  --font-mono:    ui-monospace, 'SF Mono', Menlo, monospace;

  --fs-mega:    clamp(56px, 9vw, 132px); /* @kind font */
  --fs-h1:      clamp(40px, 7vw, 88px); /* @kind font */
  --fs-h2:      clamp(32px, 6vw, 64px); /* @kind font */
  --fs-h3:      clamp(24px, 4vw, 44px); /* @kind font */
  --fs-h4:      22px;
  --fs-lead:    18px;
  --fs-body:    16px;
  --fs-small:   14px;
  --fs-micro:   12px;
  --fs-eyebrow: 12px;

  --weight-display: 700; --weight-bold: 600; --weight-medium: 500; --weight-body: 400;

  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px;
  --sp-6: 24px; --sp-7: 32px; --sp-8: 40px; --sp-9: 56px; --sp-10: 80px;
  --sp-11: 112px; --sp-12: 160px;

  /* shadows */
  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow-md: 0 8px 32px rgba(0,0,0,.4);
  --shadow-lg: 0 24px 64px rgba(0,0,0,.5);
  --shadow-glow: 0 4px 20px rgba(99,102,241,.25), 0 0 40px rgba(99,102,241,.18);
}

/* baseline */
*, *::before, *::after { box-sizing: border-box; }
html, body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--c-accent); color: #fff; }
:focus-visible { outline: 2px solid var(--c-accent-light); outline-offset: 2px; }

/* type classes */
h1, .t-h1 {
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--fs-h1); line-height: 1; letter-spacing: -0.045em; margin: 0;
}
h2, .t-h2 {
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--fs-h2); line-height: 1.05; letter-spacing: -0.035em; margin: 0;
}
h3, .t-h3 {
  font-family: var(--font-display); font-weight: 600;
  font-size: var(--fs-h3); line-height: 1.1; letter-spacing: -0.02em; margin: 0;
}
h4, .t-h4 {
  font-family: var(--font-body); font-weight: 600;
  font-size: var(--fs-h4); line-height: 1.3; letter-spacing: -0.01em; margin: 0;
}
.t-lead { font-size: var(--fs-lead); line-height: 1.7; color: var(--c-text-sub); }
p, .t-body { font-size: var(--fs-body); line-height: 1.6; margin: 0; }
.t-small { font-size: var(--fs-small); line-height: 1.5; }
.t-eyebrow, .eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--font-body); font-size: .7rem; font-weight: 700;
  letter-spacing: .22em; text-transform: uppercase; color: var(--c-accent-light);
}
.t-mute { color: var(--c-text-muted); }
.t-accent { color: var(--c-accent-light); }

em.gradient, .grad-text {
  font-style: normal;
  background: var(--gradient-text);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}