/* ============================================
   FinanceOS — Colors & Type
   Source of truth for every visual artifact.
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;700&display=swap');

:root {
  /* ===== BRAND COLORS ===== */
  --brand-pink: #f93576;
  --brand-pink-light: #ffdbe5;
  --brand-orange: #ffa310;
  --brand-orange-light: #fff8ee;

  /* ===== INK / NEUTRALS ===== */
  --navy: #1a1a2e;
  --dark: #0c142b;
  --gray: #5a5a6e;
  --gray-light: #6a6e80;
  --gray-soft: #8a8aa0;
  --text-dark: #2e3348;

  /* ===== SURFACES ===== */
  --bg-warm: #fffbf5;
  --bg-white: #ffffff;
  --surface-tinted: rgba(220, 220, 220, 0.2);

  /* ===== BORDERS ===== */
  --border: #e8e2dc;
  --border-card: #e8e4dd;
  --border-dark: #1a1a2e;

  /* ===== SEMANTIC BADGE COLORS ===== */
  --badge-pink-bg: #ffdbe5;
  --badge-pink-fg: #f93576;
  --badge-warning-bg: #fff8ee;
  --badge-warning-fg: #ffa310;
  --badge-gray-bg: #f3f4f6;
  --badge-gray-fg: #6a6e80;
  --badge-success-bg: #e8f9ee;
  --badge-success-fg: #22c55e;

  /* ===== SHADOWS ===== */
  --shadow-card-soft: 0 2px 7px rgba(0, 0, 0, 0.04);
  --shadow-card-hover: 0 8px 24px rgba(0, 0, 0, 0.08);
  --shadow-tool: 0 4px 5.25px -4px rgba(0,0,0,0.1), 0 10px 13.125px -3px rgba(0,0,0,0.1);
  --shadow-dashboard: 0 27.18px 54.35px -13.04px rgba(255, 163, 16, 0.25);
  --shadow-image-card: 0 27.59px 48.27px -13.24px rgba(26, 26, 46, 0.1);
  --shadow-pricing: 0 8px 35px rgba(0, 0, 0, 0.04);
  --shadow-cta: 0 6px 20px rgba(249, 53, 118, 0.3);

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

  /* ===== SPACING ===== */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 26px;
  --space-7: 32px;
  --space-8: 44px;
  --space-9: 60px;
  --space-10: 80px;
  --space-11: 100px;

  /* ===== EASING ===== */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);

  /* ===== TYPE FAMILIES ===== */
  --font-sans: 'Poppins', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;

  /* ===== TYPE TOKENS ===== */
  --type-display-size: 70px;
  --type-display-weight: 500;
  --type-display-leading: 1.05;
  --type-display-tracking: -1.4px;

  --type-h1-size: 44px;
  --type-h1-weight: 600;
  --type-h1-leading: 1.25;
  --type-h1-tracking: -0.44px;

  --type-h2-size: 36px;
  --type-h2-weight: 600;
  --type-h2-leading: 1.25;
  --type-h2-tracking: -0.5px;

  --type-h3-size: 22px;
  --type-h3-weight: 600;
  --type-h3-leading: 1.5;

  --type-body-lg-size: 20px;
  --type-body-lg-weight: 400;
  --type-body-lg-leading: 1.7;

  --type-body-size: 16.5px;
  --type-body-weight: 400;
  --type-body-leading: 1.8;

  --type-body-sm-size: 15.45px;
  --type-body-sm-weight: 400;
  --type-body-sm-leading: 1.8;

  --type-quote-size: 20px;
  --type-quote-weight: 600;
  --type-quote-leading: 1.5;

  --type-eyebrow-size: 14px;
  --type-eyebrow-weight: 600;
  --type-eyebrow-tracking: 1.15px;

  --type-stat-size: 81px;
  --type-stat-weight: 400;
  --type-stat-leading: 1.05;
  --type-stat-tracking: -1.6px;

  --type-mono-size: 10px;
  --type-mono-weight: 700;
  --type-mono-tracking: 2px;

  --type-button-size: 15px;
  --type-button-weight: 500;
}