/* =========================================================================
   Cashy Design System — Core Tokens
   Dark-only. Money-green accent (sampled from the Cashy mascot). Grayscale everything else.
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Syne:wght@600;700;800&family=Outfit:wght@400;500;600;700&display=swap');

:root {
  --bg:              #0A0A0A;
  --bg-elev:         #0D0D0D;
  --surface:         #161616;
  --surface-2:       #1C1C1C;
  --surface-3:       #222222;
  --border:          #222222;
  --border-strong:   #2E2E2E;
  --hairline:        #1A1A1A;

  --fg:              #FFFFFF;
  --fg-1:            #EDEDED;
  --fg-2:            #9B9B9B;
  --fg-3:            #6B6B6B;
  --fg-4:            #4A4A4A;
  --fg-5:            #2A2A2A;

  --accent:          #A8CC7E;
  --accent-hover:    #BCDC95;
  --accent-press:    #94B868;
  --accent-ink:      #1A2811;
  --accent-soft:     rgba(168, 204, 126, 0.12);
  --accent-softer:   rgba(168, 204, 126, 0.06);
  --accent-ring:     rgba(168, 204, 126, 0.35);

  --icon-green:      #A8CC7E;
  --icon-purple:     #A78BFA;
  --icon-pink:       #F472B6;
  --icon-orange:     #F59E0B;
  --icon-red:        #EF4444;
  --icon-blue:       #38BDF8;

  --status-success:  #A8CC7E;
  --status-warn:     #F59E0B;
  --status-error:    #EF4444;

  --hero-glow: radial-gradient(
    600px 420px at 18% 14%,
    rgba(168, 204, 126, 0.18) 0%,
    rgba(168, 204, 126, 0.07) 35%,
    rgba(10, 10, 10, 0) 70%
  );

  --radius-xs:  4px;
  --radius-sm:  8px;
  --radius-md:  12px;
  --radius-lg:  16px;
  --radius-xl:  24px;
  --radius-pill: 999px;

  --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;

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

  --shadow-none: none;
  --cta-glow:    0 0 0 1px rgba(168, 204, 126, 0.0), 0 8px 28px rgba(168, 204, 126, 0.18);
  --focus-ring:  0 0 0 2px var(--bg), 0 0 0 4px var(--accent-ring);

  --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;

  --fs-display-xl: 72px;
  --fs-display-lg: 56px;
  --fs-display-md: 44px;
  --fs-display-sm: 32px;
  --fs-h1:         40px;
  --fs-h2:         32px;
  --fs-h3:         22px;
  --fs-h4:         16px;
  --fs-body-lg:    18px;
  --fs-body:       15px;
  --fs-body-sm:    13px;
  --fs-label:      11px;
  --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;

  --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;
}

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);
}

.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); }

.t-fade { color: var(--fg-4); display: block; }
.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); }

.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); }

.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);
}

.t-mono { font-family: var(--font-mono); }