/* ============================================
   Design System Tokens
   Based on Razorpay Blade Design System
   ============================================ */

:root {
  /* ========== Typography ========== */

  /* Font Families */
  --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-monospace: 'Fira Code', 'Consolas', monospace;

  /* Font Sizes (Reduced by 25%) */
  --font-size-h1: 1.5rem;
  /* 24px */
  --font-size-h2: 1.125rem;
  /* 18px */
  --font-size-h3: 0.9375rem;
  /* 15px */
  --font-size-h4: 0.84375rem;
  /* 13.5px */
  --font-size-large: 0.84375rem;
  /* 13.5px */
  --font-size-medium: 0.75rem;
  /* 12px - base */
  --font-size-small: 0.65625rem;
  /* 10.5px */
  --font-size-xsmall: 0.5625rem;
  /* 9px */

  /* Font Weights */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Line Heights */
  --line-height-tight: 1.2;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;

  /* ========== Spacing (Reduced by 25%) ========== */
  --spacing-0: 0;
  --spacing-1: 0.1875rem;
  /* 3px */
  --spacing-2: 0.375rem;
  /* 6px */
  --spacing-3: 0.5625rem;
  /* 9px */
  --spacing-4: 0.75rem;
  /* 12px */
  --spacing-5: 0.9375rem;
  /* 15px */
  --spacing-6: 1.125rem;
  /* 18px */
  --spacing-8: 1.5rem;
  /* 24px */
  --spacing-10: 1.875rem;
  /* 30px */
  --spacing-12: 2.25rem;
  /* 36px */
  --spacing-16: 3rem;
  /* 48px */
  --spacing-20: 3.75rem;
  /* 60px */
  --spacing-24: 4.5rem;
  /* 72px */

  /* ========== Colors (Dark Theme) ========== */

  /* Primary - India Post Red Palette */
  --color-primary-50: #FFEBEE;
  --color-primary-100: #FFCDD2;
  --color-primary-200: #EF9A9A;
  --color-primary-300: #E57373;
  --color-primary-400: #EF5350;
  --color-primary-500: #DA251C;
  /* India Post Red */
  --color-primary-600: #C62828;
  /* Darker Red */
  --color-primary-700: #B71C1C;
  --color-primary-800: #C62828;
  --color-primary-900: #8E0000;

  /* Accent - Gold/Yellow */
  --color-accent: #FFD700;
  --color-accent-hover: #FFC107;

  /* Accent Gradient (Red/Orange) */
  --gradient-primary: linear-gradient(135deg, #DA251C 0%, #FF5722 100%);
  --gradient-hover: linear-gradient(135deg, #B71C1C 0%, #E64A19 100%);

  /* Neutral - Dark Grays */
  --color-neutral-0: #121212;
  /* Deepest Black */
  --color-neutral-50: #1E1E1E;
  /* Card Background */
  --color-neutral-100: #2D2D2D;
  --color-neutral-200: #3D3D3D;
  --color-neutral-300: #5D5D5D;
  --color-neutral-400: #7D7D7D;
  --color-neutral-500: #9E9E9E;
  --color-neutral-600: #BDBDBD;
  --color-neutral-700: #E0E0E0;
  --color-neutral-800: #F5F5F5;
  --color-neutral-900: #FFFFFF;
  /* Text White */

  /* Success - Green */
  --color-success-light: #1B5E20;
  --color-success: #00C853;
  --color-success-dark: #69F0AE;

  /* Warning - Orange */
  --color-warning-light: #FF6F00;
  --color-warning: #FFAB00;
  --color-warning-dark: #FFD740;

  /* Error - Red */
  --color-error-light: #B71C1C;
  --color-error: #FF5252;
  --color-error-dark: #FF8A80;

  /* Surface Colors */
  --surface-background: #121212;
  --surface-card: #1E1E1E;
  --surface-hover: #2D2D2D;
  --surface-input: #2C2C2C;

  /* Text Colors */
  --text-primary: #FFFFFF;
  --text-secondary: rgba(255, 255, 255, 0.7);
  --text-tertiary: rgba(255, 255, 255, 0.5);
  --text-disabled: rgba(255, 255, 255, 0.3);
  --text-inverse: #121212;

  /* Border Colors */
  --border-default: rgba(255, 255, 255, 0.1);
  --border-subtle: rgba(255, 255, 255, 0.05);
  --border-strong: rgba(255, 255, 255, 0.2);

  /* ========== Motion & Animation ========== */

  /* Duration */
  --duration-xquick: 50ms;
  --duration-quick: 150ms;
  --duration-moderate: 250ms;
  --duration-gentle: 350ms;

  /* Easing Functions */
  --easing-standard: cubic-bezier(0.4, 0.0, 0.2, 1);
  --easing-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ========== Border Radius ========== */
  --radius-small: 6px;
  --radius-medium: 12px;
  --radius-large: 20px;
  --radius-xlarge: 28px;
  --radius-full: 9999px;

  /* ========== Elevation & Glows ========== */
  --shadow-level1: 0 4px 6px rgba(0, 0, 0, 0.3);
  --shadow-level2: 0 8px 12px rgba(0, 0, 0, 0.4);
  --shadow-card: 0 4px 20px rgba(0, 0, 0, 0.2);
  --shadow-glow: 0 0 20px rgba(218, 37, 28, 0.3);
  /* Red Glow */
  --shadow-glow-hover: 0 0 30px rgba(218, 37, 28, 0.5);

  /* ========== Breakpoints ========== */
  --breakpoint-xs: 320px;
  --breakpoint-sm: 480px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
  --breakpoint-xxl: 1536px;

  /* ========== Z-Index Scale ========== */
  --z-base: 0;
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-tooltip: 1070;
}

/* ========== Base Styles ========== */

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-primary);
  font-size: var(--font-size-medium);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-normal);
  color: var(--text-primary);
  background-color: var(--surface-background);
}

/* ========== Typography ========== */

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  margin-bottom: var(--spacing-4);
}

h1 {
  font-size: var(--font-size-h1);
}

h2 {
  font-size: var(--font-size-h2);
}

h3 {
  font-size: var(--font-size-h3);
}

h4 {
  font-size: var(--font-size-h4);
}

p {
  margin-bottom: var(--spacing-4);
  line-height: var(--line-height-relaxed);
}

a {
  color: var(--color-primary-500);
  text-decoration: none;
  transition: color var(--duration-quick) var(--easing-standard);
}

a:hover {
  color: var(--color-primary-700);
  text-decoration: underline;
}

a:focus {
  outline: 2px solid var(--color-primary-500);
  outline-offset: 2px;
}

/* ========== Utility Classes ========== */

/* Spacing Utilities */
.mt-1 {
  margin-top: var(--spacing-1);
}

.mt-2 {
  margin-top: var(--spacing-2);
}

.mt-3 {
  margin-top: var(--spacing-3);
}

.mt-4 {
  margin-top: var(--spacing-4);
}

.mt-5 {
  margin-top: var(--spacing-5);
}

.mt-6 {
  margin-top: var(--spacing-6);
}

.mb-1 {
  margin-bottom: var(--spacing-1);
}

.mb-2 {
  margin-bottom: var(--spacing-2);
}

.mb-3 {
  margin-bottom: var(--spacing-3);
}

.mb-4 {
  margin-bottom: var(--spacing-4);
}

.mb-5 {
  margin-bottom: var(--spacing-5);
}

.mb-6 {
  margin-bottom: var(--spacing-6);
}

.p-1 {
  padding: var(--spacing-1);
}

.p-2 {
  padding: var(--spacing-2);
}

.p-3 {
  padding: var(--spacing-3);
}

.p-4 {
  padding: var(--spacing-4);
}

.p-5 {
  padding: var(--spacing-5);
}

.p-6 {
  padding: var(--spacing-6);
}

/* Text Utilities */
.text-primary {
  color: var(--text-primary);
}

.text-secondary {
  color: var(--text-secondary);
}

.text-tertiary {
  color: var(--text-tertiary);
}

.text-center {
  text-align: center;
}

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

.font-bold {
  font-weight: var(--font-weight-bold);
}

.font-semibold {
  font-weight: var(--font-weight-semibold);
}

.font-medium {
  font-weight: var(--font-weight-medium);
}

/* ========== Responsive Design ========== */

@media (max-width: 768px) {
  html {
    font-size: 14px;
  }

  h1 {
    font-size: 1.75rem;
  }

  h2 {
    font-size: 1.375rem;
  }

  h3 {
    font-size: 1.125rem;
  }
}

@media (min-width: 1280px) {
  html {
    font-size: 18px;
  }
}