/* ============================================ */
/* DESIGN TOKENS - CSS VARIABLES */
/* ============================================ */
/* Source: tokens.json */
/* Last Updated: 2026-09-17 */

:root {
  /* ========== COLORS ========== */
  /* Core Colors */
  --primary: #C9000C;
  --text-primary: #000000;
  --text-secondary: #666666;
  --background-light: #FFFFFF;
  --surface: #F2F2F2;
  --border-dark: #333333;
  --border-light: #E5E7EB;

  /* Status Colors */
  --success: #00AF94;
  --error: #FF4444;
  --warning: #FFA500;

  /* ========== SPACING ========== */
  /* 4px base grid */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 40px;
  --space-3xl: 60px;
  --space-4xl: 80px;
  --space-5xl: 100px;

  /* ========== TYPOGRAPHY ========== */
  /* Font Families */
  --font-primary: "Poppins", sans-serif;
  --font-secondary: "Inter", sans-serif;

  /* Font Sizes - Headings */
  --text-h1: 68px;
  --text-h2: 48px;
  --text-h2-tablet: 40px;
  --text-h2-mobile: 26px;
  --text-h3: 20px;
  --text-h4: 16px;

  /* Font Sizes - Body */
  --text-large: 18px;
  --text-base: 16px;
  --text-small: 14px;
  --text-xs: 12px;

  /* Font Weights */
  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-extrabold: 800;
  --weight-black: 900;

  /* Line Heights */
  --line-height-tight: 1.2;
  --line-height-normal: 1.4;
  --line-height-body: 1.6;
  --line-height-relaxed: 1.8;

  /* ========== COMPONENTS ========== */
  /* Button */
  --button-padding: 16px 40px;
  --button-radius: 8px;
  --button-font-size: 16px;
  --button-font-weight: 600;

  /* Card */
  --card-padding: 32px 24px;
  --card-radius: 8px;
  --card-gap: 16px;
  --card-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

  /* Badge */
  --badge-padding: 8px 16px;
  --badge-radius: 20px;
  --badge-font-size: 12px;
  --badge-font-weight: 600;

  /* ========== SHADOWS ========== */
  --shadow-subtle: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-small: 0 2px 4px rgba(0, 0, 0, 0.1);
  --shadow-medium: 0 4px 6px rgba(0, 0, 0, 0.1);
  --shadow-large: 0 8px 16px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 12px 24px rgba(0, 0, 0, 0.15);

  /* ========== ANIMATION ========== */
  /* Durations */
  --duration-fast: 0.2s;
  --duration-normal: 0.3s;
  --duration-slow: 0.4s;
  --duration-slower: 0.5s;

  /* Easing Functions */
  --easing-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --easing-out: cubic-bezier(0.4, 0, 0.2, 1);
  --easing-in: cubic-bezier(0.4, 0, 1, 1);
  --easing-linear: linear;

  /* ========== BREAKPOINTS ========== */
  /* Note: Use in @media queries */
  /* --bp-mobile: 375px; */
  /* --bp-mobile-large: 480px; */
  /* --bp-tablet: 768px; */
  /* --bp-tablet-large: 1024px; */
  /* --bp-desktop: 1200px; */

  /* ========== Z-INDEX ========== */
  --z-dropdown: 10;
  --z-sticky: 20;
  --z-fixed: 30;
  --z-modal-backdrop: 40;
  --z-modal: 50;
}

/* ============================================ */
/* DARK MODE (Future) */
/* ============================================ */
/* Uncomment when implementing dark mode */
/*
html.dark {
  --background-light: #1A1A1A;
  --text-primary: #FFFFFF;
  --text-secondary: #CCCCCC;
  --surface: #2A2A2A;
  --border-dark: #444444;
  --border-light: #333333;
}
*/