/* ===================================================================
   BanterBox Policy Design System
   Version: 1.0
   Description: Core design tokens and system variables for the 
                BanterBox Policy Platform
   
   This file contains:
   - Color system with light/dark variants
   - Typography scale and font families
   - Spacing system with fluid values
   - Layout utilities and breakpoints
   - Z-index scale for layering
   =================================================================== */

/* ===================================================================
   1. COLOR SYSTEM
   =================================================================== */

:root {
  /* Primary: Deep tech blue - conveys trust and depth */
  --color-primary-50: #E6EBF2;
  --color-primary-100: #C2D0E3;
  --color-primary-200: #9BB4D2;
  --color-primary-300: #7497C1;
  --color-primary-400: #4D7BB0;
  --color-primary-500: #2659A0;
  --color-primary-600: #1E4A86;
  --color-primary-700: #163A6B;
  --color-primary-800: #0F2B51;
  --color-primary-900: #0A2540; /* Brand primary */
  --color-primary-950: #061829;

  /* Accent: Deep burgundy - conveys authority and sophistication */
  --color-accent-50: #FBF5F5;
  --color-accent-100: #F5E6E6;
  --color-accent-200: #EBCCCC;
  --color-accent-300: #D9A3A3;
  --color-accent-400: #C57A7A;
  --color-accent-500: #9B4444; /* Brand accent */
  --color-accent-600: #7D3636;
  --color-accent-700: #632B2B;
  --color-accent-800: #4A2020;
  --color-accent-900: #321616;
  --color-accent-950: #1F0E0E;

  /* Supporting: Warm gold - adds credibility and prestige */
  --color-gold-50: #FEFBF3;
  --color-gold-100: #FDF7E6;
  --color-gold-200: #FAEECC;
  --color-gold-300: #F7E5B3;
  --color-gold-400: #F4DC99;
  --color-gold-500: #C9A961; /* Brand gold */
  --color-gold-600: #A68A4E;
  --color-gold-700: #836B3E;
  --color-gold-800: #614D2E;
  --color-gold-900: #3F2F1F;
  --color-gold-950: #281E13;

  /* Neutral grays */
  --color-gray-50: #F9FAFB;
  --color-gray-100: #F3F4F6;
  --color-gray-200: #E5E7EB;
  --color-gray-300: #D1D5DB;
  --color-gray-400: #9CA3AF;
  --color-gray-500: #6B7280;
  --color-gray-600: #4B5563;
  --color-gray-700: #374151;
  --color-gray-800: #1F2937;
  --color-gray-900: #111827;
  --color-gray-950: #030712;

  /* Semantic colors */
  --color-success: #10B981;
  --color-success-light: #D1FAE5;
  --color-success-dark: #065F46;
  
  --color-warning: #F59E0B;
  --color-warning-light: #FEF3C7;
  --color-warning-dark: #92400E;
  
  --color-error: #EF4444;
  --color-error-light: #FEE2E2;
  --color-error-dark: #991B1B;
  
  --color-info: #3B82F6;
  --color-info-light: #DBEAFE;
  --color-info-dark: #1E40AF;

  /* Background colors */
  --color-bg-primary: #FFFFFF;
  --color-bg-secondary: var(--color-gray-50);
  --color-bg-tertiary: var(--color-gray-100);
  --color-bg-cream: #FAF8F5;
  --color-bg-overlay: rgba(0, 0, 0, 0.6);
  --color-bg-glass: rgba(255, 255, 255, 0.95);

  /* Text colors */
  --color-text-primary: var(--color-gray-900);
  --color-text-secondary: var(--color-gray-700);
  --color-text-tertiary: var(--color-gray-500);
  --color-text-disabled: var(--color-gray-400);
  --color-text-inverse: #FFFFFF;

  /* Border colors */
  --color-border-light: var(--color-gray-200);
  --color-border-medium: var(--color-gray-300);
  --color-border-dark: var(--color-gray-400);

  /* Gradient definitions - Subtle and conservative */
  --gradient-primary: linear-gradient(180deg, var(--color-primary-700) 0%, var(--color-primary-900) 100%);
  --gradient-accent: linear-gradient(180deg, var(--color-accent-500) 0%, var(--color-accent-700) 100%);
  --gradient-gold: linear-gradient(180deg, var(--color-gold-400) 0%, var(--color-gold-600) 100%);
  --gradient-subtle: linear-gradient(to bottom, var(--color-bg-primary) 0%, var(--color-bg-cream) 100%);
  --gradient-overlay: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.4) 100%);

  /* Legacy/alias variables for backward compatibility (bb- prefix) */
  --bb-surface: var(--color-bg-primary);
  --bb-bg-secondary: var(--color-bg-secondary);
  --bb-elevated: var(--color-bg-tertiary);
  --bb-border: var(--color-border-light);
  --bb-accent: var(--color-primary-500);
  --bb-accent-hover: var(--color-primary-600);
  --bb-text: var(--color-text-primary);
  --bb-text-secondary: var(--color-text-secondary);
  --bb-text-tertiary: var(--color-text-tertiary);
  --bb-hover: var(--color-bg-tertiary);
  --bb-primary: var(--color-primary-500);
  --bb-info: var(--color-info);
  --bb-warning: var(--color-warning);
  --bb-error: var(--color-error);
}

/* Dark mode color overrides */
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg-primary: var(--color-gray-900);
    --color-bg-secondary: var(--color-gray-800);
    --color-bg-tertiary: var(--color-gray-700);
    --color-bg-overlay: rgba(0, 0, 0, 0.8);
    --color-bg-glass: rgba(17, 24, 39, 0.8);

    --color-text-primary: var(--color-gray-50);
    --color-text-secondary: var(--color-gray-200);
    --color-text-tertiary: var(--color-gray-400);
    --color-text-disabled: var(--color-gray-600);
    --color-text-inverse: var(--color-gray-900);

    --color-border-light: var(--color-gray-700);
    --color-border-medium: var(--color-gray-600);
    --color-border-dark: var(--color-gray-500);

    /* Update bb- aliases for dark mode */
    --bb-surface: var(--color-bg-primary);
    --bb-bg-secondary: var(--color-bg-secondary);
    --bb-elevated: var(--color-bg-tertiary);
    --bb-border: var(--color-border-light);
    --bb-text: var(--color-text-primary);
    --bb-text-secondary: var(--color-text-secondary);
    --bb-text-tertiary: var(--color-text-tertiary);
    --bb-hover: var(--color-gray-600);
  }
}

/* ===================================================================
   2. TYPOGRAPHY SYSTEM
   =================================================================== */

:root {
  /* Font families - Traditional and authoritative */
  --font-display: 'Merriweather', 'Georgia', 'Times New Roman', serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', sans-serif;
  --font-data: 'Courier New', 'SF Mono', 'Consolas', monospace;

  /* Fluid type scale using clamp() */
  --font-size-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);    /* 12px → 14px */
  --font-size-sm: clamp(0.875rem, 0.825rem + 0.25vw, 1rem);     /* 14px → 16px */
  --font-size-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);    /* 16px → 18px */
  --font-size-lg: clamp(1.125rem, 1.05rem + 0.375vw, 1.25rem);  /* 18px → 20px */
  --font-size-xl: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);      /* 20px → 24px */
  --font-size-2xl: clamp(1.5rem, 1.35rem + 0.75vw, 1.875rem);   /* 24px → 30px */
  --font-size-3xl: clamp(1.875rem, 1.65rem + 1.125vw, 2.25rem); /* 30px → 36px */
  --font-size-4xl: clamp(2.25rem, 1.95rem + 1.5vw, 3rem);       /* 36px → 48px */
  --font-size-5xl: clamp(3rem, 2.5rem + 2.5vw, 4rem);           /* 48px → 64px */
  --font-size-6xl: clamp(3.75rem, 3rem + 3.75vw, 6rem);         /* 60px → 96px */

  /* Line heights */
  --line-height-tight: 1.1;
  --line-height-snug: 1.375;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.625;
  --line-height-loose: 2;

  /* Letter spacing */
  --letter-spacing-tighter: -0.05em;
  --letter-spacing-tight: -0.025em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide: 0.025em;
  --letter-spacing-wider: 0.05em;
  --letter-spacing-widest: 0.1em;

  /* Font weights */
  --font-weight-thin: 100;
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
  --font-weight-black: 900;
}

/* ===================================================================
   3. SPACING SYSTEM
   =================================================================== */

:root {
  /* Base unit: 4px */
  --space-base: 0.25rem;

  /* Static spacing scale */
  --space-0: 0;
  --space-1: calc(var(--space-base) * 1);    /* 4px */
  --space-2: calc(var(--space-base) * 2);    /* 8px */
  --space-3: calc(var(--space-base) * 3);    /* 12px */
  --space-4: calc(var(--space-base) * 4);    /* 16px */
  --space-5: calc(var(--space-base) * 5);    /* 20px */
  --space-6: calc(var(--space-base) * 6);    /* 24px */
  --space-8: calc(var(--space-base) * 8);    /* 32px */
  --space-10: calc(var(--space-base) * 10);  /* 40px */
  --space-12: calc(var(--space-base) * 12);  /* 48px */
  --space-16: calc(var(--space-base) * 16);  /* 64px */
  --space-20: calc(var(--space-base) * 20);  /* 80px */
  --space-24: calc(var(--space-base) * 24);  /* 96px */
  --space-32: calc(var(--space-base) * 32);  /* 128px */

  /* Fluid spacing using clamp() */
  --space-xs: clamp(var(--space-2), 1.5vw, var(--space-3));
  --space-sm: clamp(var(--space-3), 2vw, var(--space-4));
  --space-md: clamp(var(--space-4), 2.5vw, var(--space-6));
  --space-lg: clamp(var(--space-6), 3vw, var(--space-8));
  --space-xl: clamp(var(--space-8), 4vw, var(--space-12));
  --space-2xl: clamp(var(--space-12), 5vw, var(--space-16));
  --space-3xl: clamp(var(--space-16), 6vw, var(--space-24));
  --space-4xl: clamp(var(--space-24), 8vw, var(--space-32));

  /* Section padding */
  --section-padding-y: var(--space-2xl);
  --section-padding-x: var(--space-lg);
  
  /* Container padding */
  --container-padding: var(--space-md);
  
  /* Component spacing */
  --component-gap: var(--space-md);
  --component-padding: var(--space-sm);
}

/* ===================================================================
   4. LAYOUT SYSTEM
   =================================================================== */

:root {
  /* Breakpoints */
  --breakpoint-xs: 320px;
  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
  --breakpoint-2xl: 1536px;

  /* Container widths */
  --container-xs: 100%;
  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1280px;
  --container-2xl: 1536px;

  /* Grid system */
  --grid-columns: 12;
  --grid-gap: var(--space-md);

  /* Aspect ratios */
  --aspect-square: 1 / 1;
  --aspect-video: 16 / 9;
  --aspect-portrait: 3 / 4;
  --aspect-landscape: 4 / 3;
  --aspect-wide: 21 / 9;

  /* Z-index scale */
  --z-negative: -1;
  --z-0: 0;
  --z-10: 10;
  --z-20: 20;
  --z-30: 30;
  --z-40: 40;
  --z-50: 50;
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-tooltip: 1070;
  --z-notification: 1080;
  --z-max: 9999;

  /* Border radius */
  --radius-none: 0;
  --radius-sm: 0.125rem;
  --radius-base: 0.25rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
  --radius-xl: 0.75rem;
  --radius-2xl: 1rem;
  --radius-3xl: 1.5rem;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --shadow-base: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-md: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --shadow-xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
  --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.35);
  --shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
  --shadow-none: 0 0 #0000;

  /* Glass morphism shadows */
  --shadow-glass: 0 8px 32px 0 rgba(31, 38, 135, 0.1);
  --shadow-glass-hover: 0 8px 32px 0 rgba(31, 38, 135, 0.15);

  /* Transitions */
  --transition-fast: 150ms;
  --transition-base: 250ms;
  --transition-slow: 350ms;
  --transition-slower: 500ms;

  /* Easing functions */
  --ease-linear: linear;
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* ===================================================================
   5. CONTAINER QUERIES SETUP
   =================================================================== */

/* Container query support */
@supports (container-type: inline-size) {
  .container-responsive {
    container-type: inline-size;
  }
  
  .container-card {
    container-type: inline-size;
    container-name: card;
  }
  
  .container-section {
    container-type: inline-size;
    container-name: section;
  }
}

/* ===================================================================
   6. CUSTOM MEDIA QUERIES
   =================================================================== */

/* Define custom media queries for consistent usage */
@custom-media --xs-up (min-width: 320px);
@custom-media --sm-up (min-width: 640px);
@custom-media --md-up (min-width: 768px);
@custom-media --lg-up (min-width: 1024px);
@custom-media --xl-up (min-width: 1280px);
@custom-media --2xl-up (min-width: 1536px);

@custom-media --sm-down (max-width: 639px);
@custom-media --md-down (max-width: 767px);
@custom-media --lg-down (max-width: 1023px);
@custom-media --xl-down (max-width: 1279px);
@custom-media --2xl-down (max-width: 1535px);

@custom-media --portrait (orientation: portrait);
@custom-media --landscape (orientation: landscape);

@custom-media --motion-ok (prefers-reduced-motion: no-preference);
@custom-media --motion-reduce (prefers-reduced-motion: reduce);

@custom-media --dark (prefers-color-scheme: dark);
@custom-media --light (prefers-color-scheme: light);

@custom-media --high-contrast (prefers-contrast: high);
@custom-media --low-contrast (prefers-contrast: low);

/* ===================================================================
   7. ROOT CONFIGURATION
   =================================================================== */

/* Apply base styles to root */
:root {
  /* Smooth scrolling */
  scroll-behavior: smooth;
  
  /* Better font rendering */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  
  /* Prevent text size adjustment on mobile */
  -webkit-text-size-adjust: 100%;
  
  /* Custom scrollbar colors */
  scrollbar-color: var(--color-primary-200) var(--color-gray-100);
  scrollbar-width: thin;
}

/* Focus visible styles */
:focus-visible {
  outline: 2px solid var(--color-primary-600);
  outline-offset: 2px;
}

/* Selection styles */
::selection {
  background-color: var(--color-gold-200);
  color: var(--color-gray-900);
}

/* Reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Print styles */
@media print {
  :root {
    --color-bg-primary: white;
    --color-text-primary: black;
  }
}