/* ============================================
   DESIGN TOKENS
   Society & AI Design System
   ============================================

   This file contains all design tokens (variables)
   used throughout the site. Edit values here to
   make site-wide changes.

   Usage: var(--token-name)
   ============================================ */

:root {
  /* ==========================================
     COLORS - Brand
     ========================================== */
  --color-primary: #005EA2;
  --color-primary-dark: #004785;
  --color-primary-light: #4589ff;

  /* Links */
  --color-link: #0043ce;
  --color-link-light: #a6c8ff;
  --color-link-hover: #78a9ff;

  /* ==========================================
     COLORS - Neutrals
     ========================================== */
  --color-black: #161616;
  --color-gray-900: #262626;
  --color-gray-800: #393939;
  --color-gray-700: #525252;
  --color-gray-600: #6f6f6f;
  --color-gray-500: #8d8d8d;
  --color-gray-400: #a8a8a8;
  --color-gray-300: #c6c6c6;
  --color-gray-200: #e0e0e0;
  --color-gray-100: #f4f4f4;
  --color-gray-50: #f8f8f8;
  --color-white: #ffffff;

  /* ==========================================
     COLORS - Semantic
     ========================================== */
  --color-text: #161616;
  --color-text-secondary: #525252;
  --color-text-muted: #6f6f6f;
  --color-text-inverse: #ffffff;

  --color-bg: #ffffff;
  --color-bg-subtle: #f8f8f8;
  --color-bg-muted: #f4f4f4;
  --color-bg-dark: #161616;

  --color-border: #e0e0e0;
  --color-border-dark: #393939;

  /* ==========================================
     COLORS - Feedback
     ========================================== */
  --color-success: #42be65;
  --color-error: #da1e28;
  --color-warning: #ff832b;

  /* ==========================================
     COLORS - Gradients
     ========================================== */
  --gradient-blue: linear-gradient(135deg, #005EA2 0%, #4589ff 100%);
  --gradient-purple: linear-gradient(135deg, #8a3ffc 0%, #be95ff 100%);
  --gradient-teal: linear-gradient(135deg, #007d79 0%, #42be65 100%);
  --gradient-orange: linear-gradient(135deg, #ff832b 0%, #ffb366 100%);
  --gradient-dark: linear-gradient(135deg, #161616 0%, #393939 100%);
  --gradient-hero-bg: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);

  /* ==========================================
     TYPOGRAPHY - Font Families
     ========================================== */
  --font-display: 'Playfair Display', serif;
  --font-body: 'IBM Plex Sans', sans-serif;
  --font-article: 'Newsreader', Georgia, serif;
  --font-heading: 'Inter', sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;

  /* ==========================================
     TYPOGRAPHY - Font Sizes
     ========================================== */
  --text-xs: 0.75rem;     /* 12px */
  --text-sm: 0.875rem;    /* 14px */
  --text-base: 1rem;      /* 16px */
  --text-md: 1.125rem;    /* 18px */
  --text-lg: 1.25rem;     /* 20px */
  --text-xl: 1.5rem;      /* 24px */
  --text-2xl: 2rem;       /* 32px */
  --text-3xl: 2.25rem;    /* 36px */
  --text-4xl: 2.75rem;    /* 44px */
  --text-5xl: 3rem;       /* 48px */

  /* Article-specific sizes */
  --text-article-body: 22px;
  --text-article-h2: 32px;
  --text-article-h3: 24px;
  --text-article-h4: 21px;
  --text-article-title: 46px;

  /* ==========================================
     TYPOGRAPHY - Line Heights
     ========================================== */
  --leading-none: 1;
  --leading-tight: 1.15;
  --leading-snug: 1.3;
  --leading-normal: 1.5;
  --leading-relaxed: 1.6;
  --leading-loose: 1.7;
  --leading-article: 35px;

  /* ==========================================
     TYPOGRAPHY - Font Weights
     ========================================== */
  --font-light: 300;
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;

  /* ==========================================
     TYPOGRAPHY - Letter Spacing
     ========================================== */
  --tracking-tight: -0.025em;
  --tracking-normal: 0;
  --tracking-wide: 0.5px;

  /* ==========================================
     SPACING
     ========================================== */
  --space-0: 0;
  --space-1: 0.25rem;   /* 4px */
  --space-2: 0.5rem;    /* 8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-5: 1.25rem;   /* 20px */
  --space-6: 1.5rem;    /* 24px */
  --space-8: 2rem;      /* 32px */
  --space-10: 2.5rem;   /* 40px */
  --space-12: 3rem;     /* 48px */
  --space-16: 4rem;     /* 64px */
  --space-20: 5rem;     /* 80px */
  --space-24: 6rem;     /* 96px */

  /* ==========================================
     LAYOUT
     ========================================== */
  --max-width-site: 1680px;
  --max-width-content: 1400px;
  --max-width-article: 1200px;
  --max-width-narrow: 900px;
  --content-width: 85%;
  --content-width-mobile: 90%;

  /* ==========================================
     BORDERS & RADIUS
     ========================================== */
  --radius-none: 0;
  --radius-sm: 3px;
  --radius-md: 4px;
  --radius-lg: 6px;
  --radius-xl: 8px;
  --radius-2xl: 10px;
  --radius-full: 9999px;

  --border-width: 1px;
  --border-width-thick: 4px;

  /* ==========================================
     SHADOWS
     ========================================== */
  --shadow-sm: 0 2px 6px rgba(96, 115, 159, 0.25);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.15);
  --shadow-xl: 0 24px 48px rgba(15, 18, 25, 0.08);
  --shadow-card: 0 2px 6px rgba(96, 115, 159, 0.25),
                 0 8px 24px rgba(96, 115, 159, 0.33);

  /* ==========================================
     TRANSITIONS
     ========================================== */
  --transition-fast: 0.15s ease;
  --transition-base: 0.2s ease;
  --transition-slow: 0.3s ease;
  --transition-slower: 0.5s ease;

  /* ==========================================
     Z-INDEX SCALE
     ========================================== */
  --z-base: 0;
  --z-dropdown: 100;
  --z-sticky: 500;
  --z-fixed: 1000;
  --z-modal-backdrop: 9000;
  --z-modal: 9500;
  --z-popover: 10000;
  --z-tooltip: 10500;
  --z-nav: 99999;
  --z-mobile-menu: 100000;
  --z-mobile-menu-btn: 100001;

  /* ==========================================
     BREAKPOINTS (for reference in media queries)
     These cannot be used as var() in media queries
     but document the system for consistency
     ========================================== */
  /* --bp-sm: 480px;   Phone */
  /* --bp-md: 640px;   Large phone */
  /* --bp-lg: 768px;   Tablet */
  /* --bp-xl: 968px;   Small laptop */
  /* --bp-2xl: 1100px; Laptop */
  /* --bp-3xl: 1400px; Desktop */

  /* ==========================================
     COMPONENT-SPECIFIC TOKENS
     ========================================== */

  /* Navigation */
  --nav-height: 65px;
  --nav-bg: var(--color-white);
  --nav-border: var(--color-border);

  /* Cards */
  --card-bg: var(--color-white);
  --card-border: var(--color-border);
  --card-radius: var(--radius-sm);
  --card-shadow-hover: var(--shadow-md);

  /* Buttons */
  --btn-radius: var(--radius-lg);
  --btn-padding-x: 1.5rem;
  --btn-padding-y: 1rem;

  /* Footer */
  --footer-bg: var(--color-bg-dark);
  --footer-text: var(--color-gray-100);
  --footer-text-muted: var(--color-gray-300);
  --footer-link: var(--color-link-light);
  --footer-link-hover: var(--color-link-hover);
  --footer-border: var(--color-border-dark);

  /* Article */
  --article-max-width: var(--max-width-article);
  --article-padding: var(--space-8);

  /* Hero */
  --hero-padding-y: var(--space-16);
  --hero-sidebar-width: 420px;
  --hero-sidebar-bg: var(--color-bg-subtle);
}

/* ==========================================
   SELECTION COLORS
   ========================================== */
::selection {
  background-color: var(--color-primary);
  color: var(--color-white);
}

::-moz-selection {
  background-color: var(--color-primary);
  color: var(--color-white);
}

/* Inverted selection for dark backgrounds */
.bg-dark ::selection,
.bg-primary ::selection,
.related-posts-section ::selection,
.focus-areas-section ::selection {
  background-color: var(--color-white);
  color: var(--color-black);
}

.bg-dark ::-moz-selection,
.bg-primary ::-moz-selection,
.related-posts-section ::-moz-selection,
.focus-areas-section ::-moz-selection {
  background-color: var(--color-white);
  color: var(--color-black);
}