/* ================================================================
   PAYLOAD DESIGN TOKENS
   Split into a LIGHT (dashboard) and DARK (marketing) world.
   Shared accent + type across both.
   ================================================================ */

@import url('./fonts/fonts.css');

:root {
  /* ---------------- Brand accent (shared across worlds) ------- */
  --accent:            #D4FF3A;  /* Payload Lime — signature */
  --accent-hover:      #C8F530;
  --accent-press:      #B8E520;
  --accent-soft:       rgba(212, 255, 58, 0.14);
  --on-accent:         #0A0A0A;  /* always ink text on lime */

  /* ---------------- Ink + Paper ------------------------------ */
  --ink:               #0A0A0A;  /* marketing bg / light-world text */
  --paper:             #FAFAF7;  /* dashboard bg / dark-world text */

  /* ---------------- Neutrals (warm, 9-step) ------------------ */
  --neutral-50:        #FAFAF7;
  --neutral-100:       #F4F4F3;
  --neutral-200:       #E8E6DF;
  --neutral-300:       #D1CFC6;
  --neutral-400:       #A3A199;
  --neutral-500:       #6E6D66;
  --neutral-600:       #4A4A45;
  --neutral-700:       #2C2C2A;
  --neutral-800:       #1A1A18;
  --neutral-900:       #0A0A0A;

  /* ---------------- Semantic --------------------------------- */
  --success:           #10B981;
  --success-bg:        #ECFDF5;
  --earnings:          #4ADE80;   /* cash-green for positive $ */
  --warning:           #F59E0B;
  --warning-bg:        #FFFBEB;
  --danger:            #EF4444;
  --danger-bg:         #FEF2F2;
  --info:              #3B82F6;
  --info-bg:           #EFF6FF;

  /* ---------------- LIGHT world (dashboards) ----------------- */
  --bg:                #FAFAF7;
  --surface:           #FFFFFF;
  --surface-hover:     #F4F4F3;
  --surface-2:         #F4F4F3;   /* subtle section bg */
  --border:            #E8E6DF;
  --border-strong:     #D1CFC6;
  --fg-1:              #0A0A0A;   /* primary text */
  --fg-2:              #4A4A45;   /* secondary text */
  --fg-3:              #6E6D66;   /* tertiary / labels */
  --fg-4:              #A3A199;   /* disabled / placeholder */

  /* ---------------- Type --------------------------------- */
  --font-sans:   'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono:   'Geist Mono', ui-monospace, SFMono-Regular, 'Menlo', monospace;

  /* Size scale (px-based for reliability) */
  --text-xs:     11px;
  --text-sm:     13px;
  --text-base:   15px;
  --text-md:     16px;
  --text-lg:     18px;
  --text-xl:     20px;
  --text-2xl:    24px;
  --text-3xl:    28px;
  --text-4xl:    36px;
  --text-5xl:    48px;
  --text-6xl:    64px;
  --text-display: 88px;

  /* Line-heights */
  --lh-tight:    1.05;
  --lh-snug:     1.2;
  --lh-normal:   1.45;
  --lh-relaxed:  1.6;

  /* Tracking */
  --track-display: -0.03em;
  --track-h:       -0.02em;
  --track-body:    -0.005em;
  --track-eyebrow: 0.08em;

  /* ---------------- Spacing (4px grid) ------------------- */
  --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;

  /* ---------------- Radii -------------------------------- */
  --radius-sm:    6px;
  --radius-md:    10px;   /* default */
  --radius-lg:    14px;
  --radius-xl:    20px;
  --radius-2xl:   28px;
  --radius-full:  999px;

  /* ---------------- Shadows (light world) ---------------- */
  --shadow-sm:    0 1px 2px rgba(10,10,10,0.04);
  --shadow-md:    0 2px 8px rgba(10,10,10,0.05), 0 1px 2px rgba(10,10,10,0.04);
  --shadow-lg:    0 12px 32px rgba(10,10,10,0.08), 0 2px 6px rgba(10,10,10,0.04);
  --shadow-xl:    0 24px 64px rgba(10,10,10,0.12);
  --glow-lime:    0 0 0 1px rgba(212,255,58,0.4), 0 8px 24px rgba(212,255,58,0.25);

  /* Dark-world inner highlights (replaces shadows on #121212-ish cards) */
  --inset-hi:     inset 0 1px 0 rgba(255,255,255,0.06);
  --inset-hi-strong: inset 0 1px 0 rgba(255,255,255,0.10);

  /* ---------------- Motion ------------------------------- */
  --ease:         cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
  --dur-hover:    120ms;
  --dur-base:     200ms;
  --dur-panel:    320ms;
  --dur-page:     500ms;
}

/* ================================================================
   DARK WORLD (marketing site) — scope by class
   ================================================================ */

.payload-dark,
[data-world="dark"] {
  --bg:            #0A0A0A;
  --surface:       #121212;
  --surface-hover: #1A1A18;
  --surface-2:     #161614;
  --border:        rgba(255,255,255,0.08);
  --border-strong: rgba(255,255,255,0.14);
  --fg-1:          #FAFAF7;
  --fg-2:          rgba(250,250,247,0.72);
  --fg-3:          rgba(250,250,247,0.52);
  --fg-4:          rgba(250,250,247,0.32);

  /* Dark-world shadows are subtle + rely on inner highlights */
  --shadow-sm:     0 1px 2px rgba(0,0,0,0.4);
  --shadow-md:     0 4px 16px rgba(0,0,0,0.4);
  --shadow-lg:     0 16px 48px rgba(0,0,0,0.5);
  --shadow-xl:     0 32px 80px rgba(0,0,0,0.6);
}

/* ================================================================
   BASE ELEMENT STYLES  (when colors_and_type.css is loaded globally)
   ================================================================ */

html, body {
  background: var(--bg);
  color: var(--fg-1);
  font-family: var(--font-sans);
  font-size: var(--text-md);
  line-height: var(--lh-normal);
  letter-spacing: var(--track-body);
  font-feature-settings: 'cv11', 'ss01';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, .h1 {
  font-size: clamp(40px, 6vw, 56px);
  font-weight: 600;
  line-height: var(--lh-tight);
  letter-spacing: var(--track-h);
  margin: 0;
}
h2, .h2 {
  font-size: clamp(28px, 3.6vw, 36px);
  font-weight: 600;
  line-height: var(--lh-snug);
  letter-spacing: var(--track-h);
  margin: 0;
}
h3, .h3 {
  font-size: var(--text-xl);
  font-weight: 500;
  line-height: var(--lh-snug);
  margin: 0;
}
h4, .h4 {
  font-size: var(--text-lg);
  font-weight: 500;
  margin: 0;
}

p { margin: 0; color: var(--fg-2); }

.display {
  font-size: clamp(48px, 9vw, 88px);
  font-weight: 600;
  line-height: 0.95;
  letter-spacing: var(--track-display);
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--track-eyebrow);
  color: var(--fg-3);
}

.num, .mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

.caption {
  font-size: var(--text-sm);
  color: var(--fg-3);
}

a { color: inherit; text-decoration: none; }

code, pre, kbd, samp {
  font-family: var(--font-mono);
  font-size: 0.92em;
}

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

/* Focus ring */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}