/* ===========================================
   PIE DESIGN SYSTEM - CSS VARIABLES
   Landing Page - Single Source of Truth
   =========================================== */

:root {
  /* ===== COLOR PALETTE ===== */

  /* Primary - Dark blue/black (brand) */
  --pie-primary: #090d1f;
  --pie-primary-50: #e8e9ed;
  --pie-primary-100: #c5c7d0;
  --pie-primary-200: #9fa2b1;
  --pie-primary-300: #797d92;
  --pie-primary-400: #5c6177;
  --pie-primary-500: #3f455c;
  --pie-primary-600: #2a2f42;
  --pie-primary-700: #151928;

  /* Secondary - Electric blue (interactive) */
  --pie-secondary: #2987cf;
  --pie-secondary-50: #e0f2fe;
  --pie-secondary-100: #b3e0f7;
  --pie-secondary-200: #7fcbef;
  --pie-secondary-300: #4db5e7;
  --pie-secondary-400: #2987cf;
  --pie-secondary-500: #1f6aa3;
  --pie-secondary-600: #164d77;
  --pie-secondary-700: #0d304b;

  /* Accent 1 - Turquoise (highlights) */
  --pie-accent-1: #40e0d0;
  --pie-accent-1-50: #ccfbf1;
  --pie-accent-1-100: #99f6e4;
  --pie-accent-1-200: #5eead4;
  --pie-accent-1-300: #2dd4bf;
  --pie-accent-1-400: #40e0d0;
  --pie-accent-1-500: #14b8a6;
  --pie-accent-1-600: #0d9488;
  --pie-accent-1-700: #0f766e;

  /* Accent 2 - Gold/Amber (premium) */
  --pie-accent-2: #ffbf00;
  --pie-accent-2-50: #fef9c3;
  --pie-accent-2-100: #fef08a;
  --pie-accent-2-200: #fde047;
  --pie-accent-2-300: #facc15;
  --pie-accent-2-400: #ffbf00;
  --pie-accent-2-500: #ca8a04;
  --pie-accent-2-600: #a16207;
  --pie-accent-2-700: #854d0e;

  /* Neutrals */
  --pie-neutral-1: #242526;
  --pie-neutral-2: #fdfefe;
  --pie-neutral-dark: #0e1117;
  --pie-neutral-gray: #6b7280;
  --pie-neutral-light: #f8f9fa;

  /* Status Colors */
  --pie-success: #10b981;
  --pie-warning: #f59e0b;
  --pie-error: #ef4444;

  /* ===== TYPOGRAPHY ===== */

  /* Font Family */
  --font-family:
    "Satoshi", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    sans-serif;

  /* Font Sizes */
  --font-hero: 4.5rem; /* 72px */
  --font-h1: 3rem; /* 48px */
  --font-h2: 2.25rem; /* 36px */
  --font-h3: 1.5rem; /* 24px */
  --font-h4: 1.25rem; /* 20px */
  --font-body: 1rem; /* 16px */
  --font-small: 0.875rem; /* 14px */
  --font-xs: 0.75rem; /* 12px */

  /* Line Heights */
  --line-hero: 1.1;
  --line-heading: 1.2;
  --line-body: 1.6;

  /* Font Weights */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-bold: 700;
  --weight-black: 900;

  /* ===== SPACING ===== */
  --space-xs: 0.25rem; /* 4px */
  --space-sm: 0.5rem; /* 8px */
  --space-md: 1rem; /* 16px */
  --space-lg: 1.5rem; /* 24px */
  --space-xl: 2rem; /* 32px */
  --space-2xl: 3rem; /* 48px */
  --space-3xl: 4rem; /* 64px */
  --space-4xl: 6rem; /* 96px */
  --space-5xl: 8rem; /* 128px */

  /* Container */
  --container-max: 1280px;
  --container-padding: 1.5rem;

  /* ===== BORDERS & SHADOWS ===== */
  --radius-sm: 0.25rem; /* 4px */
  --radius-md: 0.5rem; /* 8px */
  --radius-lg: 1rem; /* 16px */
  --radius-xl: 1.5rem; /* 24px */
  --radius-full: 9999px;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md:
    0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg:
    0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-xl:
    0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  --shadow-glow: 0 0 40px rgba(41, 135, 207, 0.3);

  /* ===== TRANSITIONS ===== */
  --transition-fast: 150ms ease;
  --transition-base: 300ms ease;
  --transition-slow: 500ms ease;

  /* ===== BREAKPOINTS (for reference) ===== */
  /* sm: 640px, md: 768px, lg: 1024px, xl: 1280px, 2xl: 1536px */

  /* ===== Z-INDEX ===== */
  --z-header: 100;
  --z-overlay: 200;
  --z-modal: 300;

  /* ===== SEMANTIC ALIASES ===== */
  /* These map to the PIE design tokens for easier use */

  /* Spacing (numeric scale) */
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;

  /* Colors */
  --color-primary: var(--pie-primary);
  --color-secondary: var(--pie-secondary);
  --color-accent-1: var(--pie-accent-1);
  --color-accent-2: var(--pie-accent-2);
  --color-text: var(--pie-neutral-2);
  --color-text-muted: var(--pie-neutral-gray);
  --color-bg: var(--pie-primary);
  --color-bg-secondary: var(--pie-neutral-1);
  --color-bg-tertiary: var(--pie-primary-600);
  --color-border: var(--pie-primary-500);
  --color-error: var(--pie-error);
  --color-success: var(--pie-success);

  /* Font Sizes */
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 2rem;

  /* Additional radius */
  --radius-2xl: 2rem;

  /* Transition alias */
  --transition-normal: var(--transition-base);
}