/* ============================================
   JAGRUT AWAAZ — Design Tokens
   Centralized design system variables
   ============================================ */

/* Font Imports */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Outfit:wght@400;500;600;700;800&display=swap");

/* ============================================
   COLOR PALETTE
   Derived from the Jagrut Awaaz logo:
   Orange (figure), Navy Blue (books), Green (leaf)
   ============================================ */
:root {
  /* Primary — Brand Orange */
  --color-primary: #e8721a;
  --color-primary-dark: #c45f12;
  --color-primary-light: #fff3e8;
  --color-primary-rgb: 232, 114, 26;

  /* Secondary — Navy Blue */
  --color-secondary: #1b3a6b;
  --color-secondary-dark: #122850;
  --color-secondary-light: #e8edf5;
  --color-secondary-rgb: 27, 58, 107;

  /* Accent — Green */
  --color-accent: #2e8b57;
  --color-accent-dark: #236b43;
  --color-accent-light: #e8f5ee;
  --color-accent-rgb: 46, 139, 87;

  /* Backgrounds */
  --color-bg-primary: #ffffff;
  --color-bg-secondary: #f7f8fa;
  --color-bg-dark: #0f1b2d;
  --color-bg-hero: linear-gradient(
    135deg,
    #1b3a6b 0%,
    #122850 50%,
    #0f1b2d 100%
  );

  /* Text */
  --color-text-primary: #1a1a2e;
  --color-text-secondary: #5a6178;
  --color-text-muted: #8892a4;
  --color-text-light: #ffffff;

  /* Borders */
  --color-border: #e2e5eb;
  --color-border-light: #f0f1f4;

  /* States */
  --color-error: #dc3545;
  --color-error-light: #f8d7da;
  --color-success: #28a745;
  --color-success-light: #d4edda;
  --color-warning: #ffc107;
  --color-warning-light: #fff3cd;

  /* Social */
  --color-instagram: #e1306c;
  --color-facebook: #1877f2;
  --color-youtube: #ff0000;
  --color-whatsapp: #25d366;
  --color-x-twitter: #000000;

  /* ============================================
     TYPOGRAPHY
     ============================================ */
  --font-body:
    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-heading: "Outfit", "Inter", sans-serif;

  /* Font Sizes */
  --font-size-xs: 0.75rem; /* 12px */
  --font-size-sm: 0.875rem; /* 14px */
  --font-size-base: 1rem; /* 16px */
  --font-size-lg: 1.125rem; /* 18px */
  --font-size-xl: 1.5rem; /* 24px */
  --font-size-2xl: 2rem; /* 32px */
  --font-size-3xl: 2.5rem; /* 40px */
  --font-size-4xl: 3rem; /* 48px */

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

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

  /* ============================================
     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 */

  /* ============================================
     BORDERS & RADIUS
     ============================================ */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 999px;

  /* ============================================
     SHADOWS
     ============================================ */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.12);
  --shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.15);
  --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow-card-hover: 0 8px 24px rgba(0, 0, 0, 0.12);

  /* ============================================
     LAYOUT
     ============================================ */
  --container-max: 1200px;
  --container-narrow: 800px;
  --header-height: 72px;

  /* ============================================
     TRANSITIONS
     ============================================ */
  --transition-fast: all 0.15s ease;
  --transition-base: all 0.3s ease;
  --transition-slow: all 0.5s ease;
  --transition-bounce: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);

  /* ============================================
     Z-INDEX SCALE
     ============================================ */
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-overlay: 300;
  --z-modal: 400;
  --z-toast: 500;
}