/* =========================================================================
   Tapped Design System: Colors & Type
   Light-first B2B fintech with cyan→magenta signature gradient.
   Mono-forward technical typography (JetBrains Mono) with clean sans body.
   ========================================================================= */

/* ---------- FONTS ---------- */
/* Primary body/UI sans: Inter (neutral, readable, fintech-safe) */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
/* Technical/mono: JetBrains Mono (signature type for Tapped) */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700;800&display=swap');
/* Display: Space Grotesk for large, confident headlines where mono feels too dense */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&display=swap');

:root {
  /* ========== BRAND CORE ========== */
  /* Pulled from the logo gradient */
  --brand-cyan:     #22D3EE;   /* cool end */
  --brand-cyan-600: #06B6D4;
  --brand-cyan-700: #0891B2;

  --brand-magenta:     #E11D74;  /* warm end */
  --brand-magenta-600: #C81E68;
  --brand-magenta-700: #A61758;

  --brand-indigo: #3730A3;       /* mid-point anchor seen in logo core */
  --brand-violet: #7C3AED;

  /* Signature gradient, cyan → violet → magenta, matching the logo */
  --brand-gradient: linear-gradient(92deg, #22D3EE 0%, #7C3AED 52%, #E11D74 100%);
  --brand-gradient-soft: linear-gradient(92deg, rgba(34,211,238,.12) 0%, rgba(124,58,237,.10) 52%, rgba(225,29,116,.12) 100%);
  --brand-gradient-vertical: linear-gradient(180deg, #22D3EE 0%, #7C3AED 55%, #E11D74 100%);

  /* ========== NEUTRALS (light-first) ========== */
  --ink-950: #050914;   /* near-black, for the ink/deep surfaces */
  --ink-900: #0A0E1A;
  --ink-800: #131A2B;
  --ink-700: #1F2A44;
  --ink-600: #334166;
  --ink-500: #4B5A82;
  --ink-400: #6B7A9F;
  --ink-300: #97A2BF;
  --ink-200: #CDD3E3;
  --ink-150: #E2E6F0;
  --ink-100: #EEF1F7;
  --ink-50:  #F5F7FB;
  --ink-25:  #FAFBFD;
  --paper:   #FFFFFF;

  /* ========== SEMANTIC: SURFACES ========== */
  --bg:         var(--paper);
  --bg-subtle:  var(--ink-25);
  --bg-muted:   var(--ink-50);
  --bg-raised:  var(--paper);
  --bg-inverse: var(--ink-900);

  --surface:        var(--paper);
  --surface-muted:  var(--ink-50);
  --surface-sunken: var(--ink-25);

  /* ========== SEMANTIC: FOREGROUNDS ========== */
  --fg-1: var(--ink-900);   /* primary text */
  --fg-2: var(--ink-600);   /* secondary text */
  --fg-3: var(--ink-400);   /* tertiary / captions */
  --fg-4: var(--ink-300);   /* disabled / placeholders */
  --fg-inverse: var(--paper);
  --fg-on-brand: var(--paper);
  --fg-link: var(--brand-cyan-700);

  /* ========== SEMANTIC: BORDERS ========== */
  --border-subtle: var(--ink-100);
  --border:        var(--ink-150);
  --border-strong: var(--ink-200);
  --border-brand:  var(--brand-cyan);

  /* ========== SEMANTIC: STATUS ========== */
  --success:    #0E9F6E;
  --success-bg: #E6F7F0;
  --success-fg: #076048;

  --warning:    #D97706;
  --warning-bg: #FFF4E5;
  --warning-fg: #8A4A00;

  --danger:     #DC2626;
  --danger-bg:  #FEECEC;
  --danger-fg:  #8B1515;

  --info:       var(--brand-cyan-700);
  --info-bg:    #E0F7FB;
  --info-fg:    #064E5C;

  /* ========== SHADOWS / ELEVATION ========== */
  /* Low, crisp shadows with a slight cool tint (fintech-polished) */
  --shadow-xs: 0 1px 2px rgba(10, 14, 26, 0.04);
  --shadow-sm: 0 1px 2px rgba(10, 14, 26, 0.05), 0 1px 3px rgba(10, 14, 26, 0.06);
  --shadow-md: 0 4px 8px -2px rgba(10, 14, 26, 0.06), 0 2px 4px -2px rgba(10, 14, 26, 0.04);
  --shadow-lg: 0 12px 24px -6px rgba(10, 14, 26, 0.10), 0 4px 8px -4px rgba(10, 14, 26, 0.06);
  --shadow-xl: 0 24px 48px -12px rgba(10, 14, 26, 0.18);
  /* Signature brand glow */
  --shadow-brand: 0 8px 24px -8px rgba(225, 29, 116, 0.35), 0 4px 12px -4px rgba(34, 211, 238, 0.30);
  --shadow-focus: 0 0 0 3px rgba(34, 211, 238, 0.28);

  /* Inset (for inputs, sunken panels) */
  --shadow-inset: inset 0 1px 2px rgba(10, 14, 26, 0.04);

  /* ========== RADII ========== */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 20px;
  --radius-pill: 999px;

  /* ========== SPACING (4px grid) ========== */
  --space-0: 0;
  --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;

  /* ========== TYPE: FAMILIES ========== */
  --font-sans:    'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-display: 'Space Grotesk', 'Inter', ui-sans-serif, system-ui, sans-serif;

  /* ========== TYPE: SIZES ========== */
  --text-xs:   12px;
  --text-sm:   14px;
  --text-md:   16px;
  --text-base: 16px;
  --text-lg:   18px;
  --text-xl:   20px;
  --text-2xl:  24px;
  --text-3xl:  30px;
  --text-4xl:  36px;
  --text-5xl:  48px;
  --text-6xl:  60px;
  --text-7xl:  72px;

  --leading-tight:  1.12;
  --leading-snug:   1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;

  --tracking-tight: -0.02em;
  --tracking-snug:  -0.01em;
  --tracking-normal: 0;
  --tracking-wide:  0.04em;
  --tracking-kbd:   0.08em;  /* for all-caps labels like "LIVE", "API" */

  /* ========== MOTION ========== */
  --ease-out:    cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.4, 1);
  --dur-fast:    120ms;
  --dur-base:    180ms;
  --dur-slow:    320ms;

  /* ========== Z ========== */
  --z-base: 0;
  --z-raised: 10;
  --z-sticky: 100;
  --z-overlay: 1000;
  --z-modal:   1100;
  --z-toast:   1200;
}

/* =========================================================================
   DARK SURFACES, not the default, but used for hero sections, code
   viewers, terminals, and the "ink" panels that echo the logo's energy.
   Scope via `.ink` or `[data-theme="ink"]`.
   ========================================================================= */
.ink, [data-theme="ink"] {
  --bg:         var(--ink-950);
  --bg-subtle:  var(--ink-900);
  --bg-muted:   var(--ink-800);
  --bg-raised:  var(--ink-900);

  --surface:        var(--ink-900);
  --surface-muted:  var(--ink-800);
  --surface-sunken: var(--ink-950);

  --fg-1: #F5F7FB;
  --fg-2: #C1C8DB;
  --fg-3: #8A94B0;
  --fg-4: #5A6486;
  --fg-inverse: var(--ink-900);
  --fg-link: var(--brand-cyan);

  --border-subtle: rgba(255,255,255,0.06);
  --border:        rgba(255,255,255,0.10);
  --border-strong: rgba(255,255,255,0.18);

  color: var(--fg-1);
  background: var(--bg);
}

/* =========================================================================
   SEMANTIC TYPOGRAPHY
   ========================================================================= */
html { font-family: var(--font-sans); color: var(--fg-1); background: var(--bg); }
body { font-family: var(--font-sans); font-size: var(--text-base); line-height: var(--leading-normal); color: var(--fg-1); }

.t-display, h1.display {
  font-family: var(--font-display);
  font-size: clamp(40px, 5vw, var(--text-7xl));
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
}

h1, .t-h1 {
  font-family: var(--font-display);
  font-size: var(--text-5xl);
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  color: var(--fg-1);
}
h2, .t-h2 {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  color: var(--fg-1);
}
h3, .t-h3 {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 600;
  letter-spacing: var(--tracking-snug);
  line-height: var(--leading-snug);
  color: var(--fg-1);
}
h4, .t-h4 {
  font-family: var(--font-sans);
  font-size: var(--text-lg);
  font-weight: 600;
  line-height: var(--leading-snug);
  color: var(--fg-1);
}

p, .t-body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--fg-2);
}
.t-body-lg { font-size: var(--text-lg); line-height: var(--leading-relaxed); color: var(--fg-2); }
.t-body-sm { font-size: var(--text-sm); line-height: var(--leading-normal); color: var(--fg-2); }

.t-caption {
  font-size: var(--text-xs);
  color: var(--fg-3);
  line-height: var(--leading-normal);
}

/* Eyebrow / all-caps kicker: the signature Tapped label style */
.t-eyebrow, .eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-kbd);
  text-transform: uppercase;
  color: var(--fg-2);
}

/* Mono code / numbers: signature technical feel */
code, kbd, samp, pre, .t-mono {
  font-family: var(--font-mono);
  font-size: 0.95em;
}
.t-mono-num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

/* Gradient text: use sparingly for hero moments & key words */
.t-gradient {
  background: var(--brand-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Links */
a, .t-link {
  color: var(--fg-link);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}
a:hover, .t-link:hover { color: var(--brand-magenta); }