/* =========================================================================
   Cashy Design System — Core Tokens
   Dark-only. Mint-green accent. Grayscale everything else.
   ========================================================================= */

/* Fonts — Syne for display (bold, tight tracking), Outfit for body.
   Both served via next/font/google in production; loaded here via @import
   so the HTML kits in this repo work standalone.
   See README.md → VISUAL FOUNDATIONS → Typography. */
@import url('https://fonts.googleapis.com/css2?family=Syne:wght@600;700;800&family=Outfit:wght@400;500;600;700&display=swap');

:root {
  /* ---- Color: Surfaces ---- */
  --bg:              #0A0A0A;  /* page background */
  --bg-elev:         #0D0D0D;  /* alt/banded background */
  --surface:         #161616;  /* cards, inputs */
  --surface-2:       #1C1C1C;  /* hover / raised card */
  --surface-3:       #222222;  /* menu, popover */
  --border:          #222222;  /* 1px card/field border */
  --border-strong:   #2E2E2E;  /* hovered border */
  --hairline:        #1A1A1A;  /* divider on card */

  /* ---- Color: Foreground (grayscale) ---- */
  --fg:              #FFFFFF;  /* headings, primary text */
  --fg-1:            #EDEDED;  /* strong body */
  --fg-2:            #9B9B9B;  /* body / muted (main prose color) */
  --fg-3:            #6B6B6B;  /* secondary card text, meta */
  --fg-4:            #4A4A4A;  /* very muted (background step numbers, placeholders) */
  --fg-5:            #2A2A2A;  /* ghost label */

  /* ---- Color: Accent — the ONE brand color ---- */
  --accent:          #3DDC97;  /* mint — CTA, highlighted headline word, status */
  --accent-hover:    #45E8A3;
  --accent-press:    #33C589;
  --accent-ink:      #06281A;  /* dark text on accent pill */
  --accent-soft:     rgba(61, 220, 151, 0.12);
  --accent-softer:   rgba(61, 220, 151, 0.06);
  --accent-ring:     rgba(61, 220, 151, 0.35);

  /* ---- Color: Feature icons (only used inside their card) ---- */
  --icon-green:      #3DDC97;
  --icon-purple:     #A78BFA;
  --icon-pink:       #F472B6;
  --icon-orange:     #F59E0B;
  --icon-red:        #EF4444;
  --icon-blue:       #38BDF8;

  /* ---- Color: Status ---- */
  --status-success:  #3DDC97;
  --status-warn:     #F59E0B;
  --status-error:    #EF4444;

  /* ---- Hero ambient glow (ONLY gradient allowed) ---- */
  --hero-glow: radial-gradient(
    600px 420px at 18% 14%,
    rgba(61, 220, 151, 0.18) 0%,
    rgba(61, 220, 151, 0.07) 35%,
    rgba(10, 10, 10, 0) 70%
  );

  /* ---- Radii ---- */
  --radius-xs:  4px;
  --radius-sm:  8px;
  --radius-md:  12px;    /* default card */
  --radius-lg:  16px;    /* large card */
  --radius-xl:  24px;    /* hero/CTA container */
  --radius-pill: 999px;  /* buttons, chips, avatars */

  /* ---- Spacing scale (4px base) ---- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* ---- Borders ---- */
  --border-width: 1px;
  --border-card:  1px solid var(--border);
  --border-field: 1px solid var(--border-strong);

  /* ---- Elevation — Cashy uses borders, NOT shadows. ----
     The only "shadow" in the system is a faint inner glow for the
     primary CTA and the ambient hero radial. Everything else is flat. */
  --shadow-none: none;
  --cta-glow:    0 0 0 1px rgba(61, 220, 151, 0.0), 0 8px 28px rgba(61, 220, 151, 0.18);
  --focus-ring:  0 0 0 2px var(--bg), 0 0 0 4px var(--accent-ring);

  /* ---- Typography families ---- */
  --font-display: 'Syne', ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif;
  --font-body:    'Outfit', ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif;
  --font-mono:    ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* ---- Type sizes (fluid-friendly but fixed for system) ---- */
  --fs-display-xl: 72px;   /* hero headline */
  --fs-display-lg: 56px;   /* section hero */
  --fs-display-md: 44px;   /* section title */
  --fs-display-sm: 32px;
  --fs-h1:         40px;
  --fs-h2:         32px;
  --fs-h3:         22px;   /* card title */
  --fs-h4:         16px;   /* small card title */
  --fs-body-lg:    18px;
  --fs-body:       15px;
  --fs-body-sm:    13px;
  --fs-label:      11px;   /* eyebrow / caps label */
  --fs-meta:       12px;

  --lh-tight:   1.05;
  --lh-snug:    1.2;
  --lh-normal:  1.5;
  --lh-loose:   1.65;

  --tracking-tight:   -0.03em;
  --tracking-snug:    -0.015em;
  --tracking-normal:  0;
  --tracking-wide:    0.08em;
  --tracking-caps:    0.14em;  /* for EYEBROW labels like "HOW IT WORKS" */

  /* ---- Motion ---- */
  --ease-out:   cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:   120ms;
  --dur-base:   180ms;
  --dur-slow:   320ms;
}

/* =========================================================================
   Base / resets — applied when colors_and_type.css is the stylesheet
   ========================================================================= */
html, body {
  background: var(--bg);
  color: var(--fg-1);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection {
  background: var(--accent-soft);
  color: var(--fg);
}

/* =========================================================================
   Semantic text styles — reference these in components
   ========================================================================= */

.t-display-xl,
.t-display-lg,
.t-display-md,
.t-display-sm,
.t-h1, .t-h2, .t-h3, .t-h4 {
  font-family: var(--font-display);
  color: var(--fg);
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
  line-height: var(--lh-tight);
  margin: 0;
}

.t-display-xl { font-size: var(--fs-display-xl); }
.t-display-lg { font-size: var(--fs-display-lg); }
.t-display-md { font-size: var(--fs-display-md); line-height: var(--lh-snug); }
.t-display-sm { font-size: var(--fs-display-sm); line-height: var(--lh-snug); }
.t-h1 { font-size: var(--fs-h1); }
.t-h2 { font-size: var(--fs-h2); }
.t-h3 { font-size: var(--fs-h3); font-weight: 600; letter-spacing: var(--tracking-snug); }
.t-h4 { font-size: var(--fs-h4); font-weight: 600; letter-spacing: var(--tracking-snug); }

/* The signature "fade headline" pattern:
     <h2 class="t-display-lg">From DM to booked call. <span class="t-fade">Six steps. Zero effort.</span></h2>
*/
.t-fade { color: var(--fg-4); display: block; }

/* Highlighted headline word — the single bright mint-green emphasis */
.t-accent { color: var(--accent); }

.t-body-lg { font-family: var(--font-body); font-size: var(--fs-body-lg); color: var(--fg-2); line-height: var(--lh-loose); }
.t-body    { font-family: var(--font-body); font-size: var(--fs-body);    color: var(--fg-2); line-height: var(--lh-normal); }
.t-body-sm { font-family: var(--font-body); font-size: var(--fs-body-sm); color: var(--fg-3); line-height: var(--lh-normal); }
.t-meta    { font-family: var(--font-body); font-size: var(--fs-meta);    color: var(--fg-3); }

/* Eyebrow label — ALWAYS caps, tracked, often in accent */
.t-eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--accent);
}
.t-eyebrow--muted { color: var(--fg-3); }

/* Step label inside cards: "STEP 01" */
.t-step {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--fg-3);
}

/* Mono for numeric data (stat values stay display font, but labels/meta mono) */
.t-mono { font-family: var(--font-mono); }