/* =========================================================================
   SpendPace — Colors & Type
   Single source of truth for design tokens. Import in every UI kit + slide.
   ========================================================================= */

/* ---------- Fonts ----------
   Wordmark: Manrope SemiBold (logo + the word "SpendPace")
   UI headings: Inter SemiBold (600)
   Body: Inter Regular (400)
   Labels & numbers: Inter Medium (500)
   Mono / data dumps: JetBrains Mono.
   --------------------------------------------------------------------- */
@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@500;600;700;800&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap");

:root {
  /* ============================ PALETTE ================================ */
  /* Brand — charcoal core */
  --sp-ink-900: #0E1116;   /* deepest — page surfaces, app icon ground */
  --sp-ink-800: #1A1F24;   /* rich dark gray — cards on dark */
  --sp-ink-700: #232930;
  --sp-ink-600: #2E353D;
  --sp-ink-500: #3D464F;

  /* Brand — accent (neon lime) */
  --sp-lime-900: #4A6307;   /* deep olive — outlined accents on light */
  --sp-lime-700: #7AA80E;   /* mid lime — text/icons on light */
  --sp-lime-600: #A8E215;   /* bright lime — hover-darker */
  --sp-lime-500: #C6FF1A;   /* PRIMARY NEON LIME — CTAs, signature dot, "on pace" */
  --sp-lime-400: #D4FF4D;   /* lifted lime — press / glow */
  --sp-lime-300: #E6FF70;   /* soft lime — chart fills */
  --sp-lime-100: #EFFFC2;   /* tint surface on light */
  --sp-lime-50:  #F8FFE5;
  --sp-lime-tint-dark: rgba(198,255,26,0.14);  /* lime wash for dark surfaces */

  /* Legacy aliases — kept so existing references stay valid */
  --sp-emerald-700: var(--sp-lime-700);
  --sp-emerald-600: var(--sp-lime-600);
  --sp-emerald-500: var(--sp-lime-500);
  --sp-emerald-400: var(--sp-lime-400);
  --sp-emerald-300: var(--sp-lime-300);
  --sp-emerald-100: var(--sp-lime-100);
  --sp-emerald-50:  var(--sp-lime-50);

  /* Neutrals — light surfaces */
  --sp-paper:     #FAFAF7;     /* warm off-white page bg */
  --sp-paper-2:   #F3F3EE;
  --sp-line:      #E6E6E0;     /* hairline borders on light */
  --sp-line-dark: rgba(255,255,255,0.08);  /* hairlines on dark */

  /* Text on light */
  --sp-fg-1: #0E1116;          /* primary */
  --sp-fg-2: #4B5560;          /* secondary */
  --sp-fg-3: #8A93A0;          /* tertiary / meta */
  --sp-fg-4: #B7BDC6;          /* disabled */

  /* Text on dark */
  --sp-on-dark-1: #F5F6F4;
  --sp-on-dark-2: rgba(245,246,244,0.68);
  --sp-on-dark-3: rgba(245,246,244,0.42);
  --sp-on-dark-4: rgba(245,246,244,0.24);

  /* Semantic — spending awareness */
  --sp-pace-on:    #C6FF1A;    /* on pace — lime is the success color */
  --sp-pace-soft:  #FFB454;    /* slightly ahead, gentle nudge */
  --sp-pace-over:  #FF5A5F;    /* over pace — used sparingly */
  --sp-info:       #5B8CFF;    /* informational only, not branded */
  --sp-success:    var(--sp-lime-500);
  --sp-warning:    #FFB454;
  --sp-error:      #FF5A5F;

  /* Gradients */
  --sp-grad-emerald: linear-gradient(135deg, #7AA80E 0%, #C6FF1A 45%, #D4FF4D 100%);
  --sp-grad-emerald-soft: linear-gradient(135deg, rgba(198,255,26,0.18) 0%, rgba(212,255,77,0.04) 100%);
  --sp-grad-lime: linear-gradient(135deg, #7AA80E 0%, #C6FF1A 45%, #D4FF4D 100%);
  --sp-grad-ink: linear-gradient(180deg, #1A1F24 0%, #0E1116 100%);
  --sp-grad-paper: linear-gradient(180deg, #FFFFFF 0%, #F3F3EE 100%);

  /* ============================ TYPE =================================== */
  /* Two families, two jobs.
     Display (Manrope) → big numbers, hero/landing headlines, screen headers.
     UI (Inter)         → body, labels, small numbers, everything supportive. */
  --sp-font-wordmark: "Manrope", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --sp-font-display:  "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --sp-font-ui:       "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --sp-font-mono:     "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Numbers — Manrope at display sizes, Inter at body sizes.
     Both have proper tabular figures via the feature settings below. */
  --sp-font-num-display: "Manrope", ui-sans-serif, system-ui, sans-serif;
  --sp-font-num: "Inter", ui-sans-serif, system-ui, sans-serif;
  --sp-num-features: "tnum" 1, "lnum" 1, "ss01" 1;

  /* Weights — by role */
  --sp-w-balance:  800;   /* Manrope ExtraBold — the hero balance number, the moment the brand earns its name */
  --sp-w-display:  700;   /* Manrope Bold — landing / hero headlines */
  --sp-w-screen:   600;   /* Manrope SemiBold — screen headers, secondary display */
  --sp-w-wordmark: 600;   /* Manrope SemiBold — wordmark */
  --sp-w-heading:  600;   /* Inter SemiBold — UI headings inside content (h3/h4) */
  --sp-w-body:     400;   /* Inter Regular — body */
  --sp-w-label:    500;   /* Inter Medium — labels, eyebrows, all numbers in content */

  /* ============================ DISPLAY SCALE ========================== */
  /* Mobile-first, but works on web. Each rung gets its own tracking + leading
     because tight type at large sizes needs more negative tracking than at small. */
  --sp-display-balance: 96px;   /* hero balance ($1,710) */
  --sp-display-xl:      72px;   /* landing headline */
  --sp-display-lg:      56px;   /* section hero */
  --sp-display-md:      40px;   /* mid-hero / large modal title */
  --sp-display-sm:      32px;   /* screen header */
  --sp-display-xs:      24px;   /* daily rate ($39/day), card title big */

  --sp-display-balance-track: -0.04em;
  --sp-display-xl-track:      -0.035em;
  --sp-display-lg-track:      -0.03em;
  --sp-display-md-track:      -0.025em;
  --sp-display-sm-track:      -0.02em;
  --sp-display-xs-track:      -0.015em;

  --sp-display-balance-leading: 0.92;
  --sp-display-xl-leading:      0.96;
  --sp-display-lg-leading:      1.0;
  --sp-display-md-leading:      1.05;
  --sp-display-sm-leading:      1.1;
  --sp-display-xs-leading:      1.15;

  /* Type scale (1.25 minor third, anchored at 16) */
  --sp-text-xs:   12px;
  --sp-text-sm:   14px;
  --sp-text-base: 16px;
  --sp-text-md:   18px;
  --sp-text-lg:   22px;
  --sp-text-xl:   28px;
  --sp-text-2xl:  36px;
  --sp-text-3xl:  48px;
  --sp-text-4xl:  64px;
  --sp-text-5xl:  84px;   /* Safe to Spend hero */

  --sp-leading-tight: 1.05;
  --sp-leading-snug:  1.2;
  --sp-leading-body:  1.5;
  --sp-leading-loose: 1.65;

  --sp-track-tight: -0.03em;   /* large display */
  --sp-track-snug:  -0.015em;  /* h1/h2 */
  --sp-track-flat:  0;
  --sp-track-meta:  0.02em;    /* eyebrows, labels */

  /* ============================ SPACING ================================ */
  --sp-space-1:  4px;
  --sp-space-2:  8px;
  --sp-space-3:  12px;
  --sp-space-4:  16px;
  --sp-space-5:  20px;
  --sp-space-6:  24px;
  --sp-space-7:  32px;
  --sp-space-8:  40px;
  --sp-space-9:  56px;
  --sp-space-10: 72px;
  --sp-space-11: 96px;
  --sp-space-12: 128px;

  /* ============================ RADII ================================== */
  --sp-radius-xs: 6px;     /* chip */
  --sp-radius-sm: 10px;    /* input */
  --sp-radius-md: 14px;    /* button */
  --sp-radius-lg: 20px;    /* card */
  --sp-radius-xl: 28px;    /* feature card */
  --sp-radius-2xl: 36px;   /* sheet */
  --sp-radius-pill: 999px;
  --sp-radius-app-icon: 22%;  /* iOS continuous-corner ratio */

  /* ============================ SHADOWS ================================ */
  /* Soft, used sparingly — only to suggest elevation on light surfaces */
  --sp-shadow-1: 0 1px 2px rgba(14,17,22,0.04), 0 1px 1px rgba(14,17,22,0.03);
  --sp-shadow-2: 0 4px 12px rgba(14,17,22,0.06), 0 1px 2px rgba(14,17,22,0.04);
  --sp-shadow-3: 0 14px 40px rgba(14,17,22,0.10), 0 2px 6px rgba(14,17,22,0.04);
  --sp-shadow-emerald: 0 12px 32px rgba(198,255,26,0.32);
  --sp-shadow-lime: 0 12px 32px rgba(198,255,26,0.32);

  /* Inner highlights for dark cards */
  --sp-inner-light: inset 0 1px 0 rgba(255,255,255,0.04);

  /* ============================ MOTION ================================= */
  --sp-ease-standard: cubic-bezier(0.2, 0.7, 0.2, 1);
  --sp-ease-emphasized: cubic-bezier(0.16, 1, 0.3, 1);
  --sp-ease-exit: cubic-bezier(0.4, 0, 1, 1);

  --sp-dur-1: 120ms;   /* micro press */
  --sp-dur-2: 200ms;   /* hover, color */
  --sp-dur-3: 320ms;   /* card, sheet */
  --sp-dur-4: 520ms;   /* page transition */
  --sp-dur-5: 900ms;   /* number tickers, hero animations */

  /* ============================ LAYOUT ================================= */
  --sp-content-max: 1200px;
  --sp-content-tight: 720px;
  --sp-gutter: 24px;
}

/* =========================================================================
   SEMANTIC ELEMENT STYLES
   ========================================================================= */
.sp-h1, .sp-h2, .sp-h3, .sp-h4, .sp-display, .sp-body, .sp-meta {
  font-family: var(--sp-font-display);
  color: var(--sp-fg-1);
  margin: 0;
}

.sp-wordmark {
  font-family: var(--sp-font-wordmark);
  font-weight: var(--sp-w-wordmark);
  letter-spacing: -0.025em;
}

.sp-display {
  font-size: var(--sp-text-5xl);
  font-weight: var(--sp-w-heading);
  letter-spacing: var(--sp-track-tight);
  line-height: var(--sp-leading-tight);
  font-feature-settings: var(--sp-num-features);
}

.sp-h1 {
  font-size: var(--sp-text-3xl);
  font-weight: var(--sp-w-heading);
  letter-spacing: var(--sp-track-snug);
  line-height: var(--sp-leading-tight);
}

.sp-h2 {
  font-size: var(--sp-text-2xl);
  font-weight: var(--sp-w-heading);
  letter-spacing: var(--sp-track-snug);
  line-height: var(--sp-leading-snug);
}

.sp-h3 {
  font-size: var(--sp-text-xl);
  font-weight: var(--sp-w-heading);
  letter-spacing: var(--sp-track-snug);
  line-height: var(--sp-leading-snug);
}

.sp-h4 {
  font-size: var(--sp-text-lg);
  font-weight: var(--sp-w-heading);
  letter-spacing: var(--sp-track-flat);
  line-height: var(--sp-leading-snug);
}

.sp-body {
  font-size: var(--sp-text-base);
  font-weight: var(--sp-w-body);
  line-height: var(--sp-leading-body);
  color: var(--sp-fg-2);
}

.sp-body-sm {
  font-size: var(--sp-text-sm);
  font-weight: var(--sp-w-body);
  line-height: var(--sp-leading-body);
  color: var(--sp-fg-2);
}

.sp-label, .sp-meta, .sp-num {
  font-weight: var(--sp-w-label);
}

.sp-meta {
  font-size: var(--sp-text-xs);
  letter-spacing: var(--sp-track-meta);
  text-transform: uppercase;
  color: var(--sp-fg-3);
}

.sp-num {
  font-family: var(--sp-font-num);
  font-feature-settings: var(--sp-num-features);
  font-variant-numeric: tabular-nums lining-nums;
}

.sp-mono {
  font-family: var(--sp-font-mono);
  font-feature-settings: "zero" 1;
}