/**
 * TenderPipe Design Tokens
 * Single source of truth for all design variables across the entire application
 *
 * @package TenderPipe
 * @version 2.0.0
 */

:root {
  /* ============================================
     BRAND COLORS
     ============================================ */

  /* Primary Blue - Main brand color */
  --tp-primary: #0066CC;
  --tp-primary-50: #E6F2FF;
  --tp-primary-100: #CCE5FF;
  --tp-primary-200: #99CBFF;
  --tp-primary-300: #66B1FF;
  --tp-primary-400: #3398FF;
  --tp-primary-500: #0066CC; /* Base */
  --tp-primary-600: #0052A3;
  --tp-primary-700: #003D7A;
  --tp-primary-800: #002952;
  --tp-primary-900: #001429;

  /* Legacy aliases for backward compatibility */
  --tp-primary-light: #3385D6;
  --tp-primary-dark: #0052A3;

  /* Accent Orange - Call-to-action color */
  --tp-accent: #FF6B35;
  --tp-accent-50: #FFF3EF;
  --tp-accent-100: #FFE7DF;
  --tp-accent-200: #FFCFBF;
  --tp-accent-300: #FFB79F;
  --tp-accent-400: #FF9F7F;
  --tp-accent-500: #FF6B35; /* Base */
  --tp-accent-600: #E55A2B;
  --tp-accent-700: #CC4A21;
  --tp-accent-800: #B23A17;
  --tp-accent-900: #992A0D;

  /* Legacy aliases */
  --tp-accent-light: #FF8555;
  --tp-accent-dark: #E55A2B;

  /* Secondary Teal - Supporting color */
  --tp-secondary: #00A3BF;
  --tp-secondary-light: #33B5CC;
  --tp-secondary-dark: #008299;

  /* Logo Colors */
  --tp-logo-primary: var(--tp-primary);
  --tp-logo-accent: var(--tp-accent);

  /* ============================================
     NEUTRAL COLORS
     ============================================ */

  --tp-white: #FFFFFF;
  --tp-black: #000000;

  --tp-gray-50: #F9FAFB;
  --tp-gray-100: #F3F4F6;
  --tp-gray-200: #E5E7EB;
  --tp-gray-300: #D1D5DB;
  --tp-gray-400: #9CA3AF;
  --tp-gray-500: #6B7280;
  --tp-gray-600: #4B5563;
  --tp-gray-700: #374151;
  --tp-gray-800: #1F2937;
  --tp-gray-900: #111827;

  /* Legacy aliases */
  --tp-dark: #1F2937;

  /* ============================================
     SEMANTIC COLORS
     ============================================ */

  /* Success - Green */
  --tp-success: #10B981;
  --tp-success-light: #34D399;
  --tp-success-dark: #059669;
  --tp-success-bg: #D1FAE5;
  --tp-success-text: #065F46;

  /* Warning - Yellow/Orange */
  --tp-warning: #F59E0B;
  --tp-warning-light: #FBBF24;
  --tp-warning-dark: #D97706;
  --tp-warning-bg: #FEF3C7;
  --tp-warning-text: #92400E;

  /* Error/Danger - Red */
  --tp-error: #EF4444;
  --tp-error-light: #F87171;
  --tp-error-dark: #DC2626;
  --tp-error-bg: #FEE2E2;
  --tp-error-text: #991B1B;

  /* Info - Blue */
  --tp-info: #3B82F6;
  --tp-info-light: #60A5FA;
  --tp-info-dark: #2563EB;
  --tp-info-bg: #DBEAFE;
  --tp-info-text: #1E40AF;

  /* ============================================
     SURFACE COLORS
     ============================================ */

  --tp-surface: #FFFFFF;
  --tp-surface-hover: #F9FAFB;
  --tp-surface-active: #F3F4F6;
  --tp-surface-disabled: #E5E7EB;

  --tp-background: #F9FAFB;
  --tp-background-alt: #FFFFFF;

  --tp-overlay: rgba(0, 0, 0, 0.5);
  --tp-overlay-light: rgba(0, 0, 0, 0.3);
  --tp-overlay-dark: rgba(0, 0, 0, 0.7);

  /* ============================================
     TEXT COLORS
     ============================================ */

  --tp-text-primary: #111827;
  --tp-text-secondary: #4B5563;
  --tp-text-tertiary: #6B7280;
  --tp-text-disabled: #9CA3AF;
  --tp-text-inverse: #FFFFFF;
  --tp-text-link: var(--tp-primary);
  --tp-text-link-hover: var(--tp-primary-dark);

  /* ============================================
     BORDER COLORS
     ============================================ */

  --tp-border: #E5E7EB;
  --tp-border-light: #F3F4F6;
  --tp-border-medium: #D1D5DB;
  --tp-border-dark: #9CA3AF;
  --tp-border-focus: var(--tp-primary);
  --tp-border-error: var(--tp-error);
  --tp-border-success: var(--tp-success);

  /* ============================================
     TYPOGRAPHY
     ============================================ */

  /* Font Families */
  --tp-font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --tp-font-family-mono: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;

  /* Font Sizes */
  --tp-font-size-xs: 0.75rem;      /* 12px */
  --tp-font-size-sm: 0.875rem;     /* 14px */
  --tp-font-size-base: 1rem;       /* 16px */
  --tp-font-size-lg: 1.125rem;     /* 18px */
  --tp-font-size-xl: 1.25rem;      /* 20px */
  --tp-font-size-2xl: 1.5rem;      /* 24px */
  --tp-font-size-3xl: 1.875rem;    /* 30px */
  --tp-font-size-4xl: 2.25rem;     /* 36px */
  --tp-font-size-5xl: 3rem;        /* 48px */
  --tp-font-size-6xl: 3.75rem;     /* 60px */
  --tp-font-size-7xl: 4.5rem;      /* 72px */

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

  /* Line Heights */
  --tp-line-height-none: 1;
  --tp-line-height-tight: 1.25;
  --tp-line-height-snug: 1.375;
  --tp-line-height-normal: 1.5;
  --tp-line-height-relaxed: 1.625;
  --tp-line-height-loose: 2;

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

  /* ============================================
     SPACING SCALE
     ============================================ */

  --tp-spacing-0: 0;
  --tp-spacing-px: 1px;
  --tp-spacing-0-5: 0.125rem;  /* 2px */
  --tp-spacing-1: 0.25rem;     /* 4px */
  --tp-spacing-1-5: 0.375rem;  /* 6px */
  --tp-spacing-2: 0.5rem;      /* 8px */
  --tp-spacing-2-5: 0.625rem;  /* 10px */
  --tp-spacing-3: 0.75rem;     /* 12px */
  --tp-spacing-3-5: 0.875rem;  /* 14px */
  --tp-spacing-4: 1rem;        /* 16px */
  --tp-spacing-5: 1.25rem;     /* 20px */
  --tp-spacing-6: 1.5rem;      /* 24px */
  --tp-spacing-7: 1.75rem;     /* 28px */
  --tp-spacing-8: 2rem;        /* 32px */
  --tp-spacing-9: 2.25rem;     /* 36px */
  --tp-spacing-10: 2.5rem;     /* 40px */
  --tp-spacing-11: 2.75rem;    /* 44px */
  --tp-spacing-12: 3rem;       /* 48px */
  --tp-spacing-14: 3.5rem;     /* 56px */
  --tp-spacing-16: 4rem;       /* 64px */
  --tp-spacing-20: 5rem;       /* 80px */
  --tp-spacing-24: 6rem;       /* 96px */
  --tp-spacing-28: 7rem;       /* 112px */
  --tp-spacing-32: 8rem;       /* 128px */
  --tp-spacing-36: 9rem;       /* 144px */
  --tp-spacing-40: 10rem;      /* 160px */
  --tp-spacing-44: 11rem;      /* 176px */
  --tp-spacing-48: 12rem;      /* 192px */
  --tp-spacing-52: 13rem;      /* 208px */
  --tp-spacing-56: 14rem;      /* 224px */
  --tp-spacing-60: 15rem;      /* 240px */
  --tp-spacing-64: 16rem;      /* 256px */
  --tp-spacing-72: 18rem;      /* 288px */
  --tp-spacing-80: 20rem;      /* 320px */
  --tp-spacing-96: 24rem;      /* 384px */

  /* Legacy aliases */
  --tp-spacing-xs: var(--tp-spacing-1);
  --tp-spacing-sm: var(--tp-spacing-2);
  --tp-spacing-md: var(--tp-spacing-4);
  --tp-spacing-lg: var(--tp-spacing-6);
  --tp-spacing-xl: var(--tp-spacing-8);
  --tp-spacing-2xl: var(--tp-spacing-12);
  --tp-spacing-3xl: var(--tp-spacing-16);
  --tp-spacing-4xl: var(--tp-spacing-24);
  --tp-spacing-5xl: var(--tp-spacing-32);

  /* ============================================
     BORDER RADIUS
     ============================================ */

  --tp-radius-none: 0;
  --tp-radius-xs: 0.125rem;    /* 2px */
  --tp-radius-sm: 0.25rem;     /* 4px */
  --tp-radius-md: 0.375rem;    /* 6px */
  --tp-radius-base: 0.5rem;    /* 8px */
  --tp-radius-lg: 0.625rem;    /* 10px */
  --tp-radius-xl: 0.75rem;     /* 12px */
  --tp-radius-2xl: 1rem;       /* 16px */
  --tp-radius-3xl: 1.25rem;    /* 20px */
  --tp-radius-full: 9999px;
  --tp-radius-circle: 50%;

  /* ============================================
     SHADOWS
     ============================================ */

  --tp-shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --tp-shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  --tp-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --tp-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --tp-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  --tp-shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  --tp-shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
  --tp-shadow-none: none;

  /* Colored Shadows */
  --tp-shadow-primary: 0 4px 14px 0 rgba(0, 102, 204, 0.25);
  --tp-shadow-accent: 0 4px 14px 0 rgba(255, 107, 53, 0.25);
  --tp-shadow-success: 0 4px 14px 0 rgba(16, 185, 129, 0.25);
  --tp-shadow-error: 0 4px 14px 0 rgba(239, 68, 68, 0.25);

  /* Focus Shadow */
  --tp-shadow-focus: 0 0 0 3px rgba(0, 102, 204, 0.1);
  --tp-shadow-focus-error: 0 0 0 3px rgba(239, 68, 68, 0.1);

  /* ============================================
     TRANSITIONS & ANIMATIONS
     ============================================ */

  /* Durations */
  --tp-duration-instant: 0ms;
  --tp-duration-fast: 150ms;
  --tp-duration-base: 250ms;
  --tp-duration-slow: 350ms;
  --tp-duration-slower: 500ms;

  /* Timing Functions */
  --tp-ease-linear: linear;
  --tp-ease-in: cubic-bezier(0.4, 0, 1, 1);
  --tp-ease-out: cubic-bezier(0, 0, 0.2, 1);
  --tp-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --tp-ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);

  /* Combined Transitions */
  --tp-transition-fast: 150ms ease-in-out;
  --tp-transition-base: 250ms ease-in-out;
  --tp-transition-slow: 350ms ease-in-out;
  --tp-transition-colors: color 150ms ease-in-out, background-color 150ms ease-in-out, border-color 150ms ease-in-out;
  --tp-transition-transform: transform 250ms ease-in-out;
  --tp-transition-all: all 250ms ease-in-out;

  /* ============================================
     Z-INDEX SCALE
     ============================================ */

  --tp-z-0: 0;
  --tp-z-10: 10;
  --tp-z-20: 20;
  --tp-z-30: 30;
  --tp-z-40: 40;
  --tp-z-50: 50;
  --tp-z-auto: auto;

  /* Semantic Z-Index */
  --tp-z-dropdown: 1000;
  --tp-z-sticky: 1020;
  --tp-z-fixed: 1030;
  --tp-z-modal-backdrop: 1040;
  --tp-z-modal: 1050;
  --tp-z-popover: 1060;
  --tp-z-tooltip: 1070;
  --tp-z-notification: 1080;

  /* ============================================
     LAYOUT
     ============================================ */

  /* Container */
  --tp-container-max-width: 1200px;
  --tp-container-max-width-sm: 640px;
  --tp-container-max-width-md: 768px;
  --tp-container-max-width-lg: 1024px;
  --tp-container-max-width-xl: 1280px;
  --tp-container-max-width-2xl: 1536px;
  --tp-container-padding: 1.5rem;

  /* Breakpoints (for reference in JS/media queries) */
  --tp-breakpoint-sm: 640px;
  --tp-breakpoint-md: 768px;
  --tp-breakpoint-lg: 1024px;
  --tp-breakpoint-xl: 1280px;
  --tp-breakpoint-2xl: 1536px;

  /* Header Heights */
  --tp-header-height: 80px;
  --tp-header-height-mobile: 64px;

  /* Sidebar Widths */
  --tp-sidebar-width: 280px;
  --tp-sidebar-width-collapsed: 64px;

  /* ============================================
     FORM ELEMENTS
     ============================================ */

  /* Input Heights */
  --tp-input-height-sm: 36px;
  --tp-input-height-md: 44px;
  --tp-input-height-lg: 52px;

  /* Input Padding */
  --tp-input-padding-x-sm: 0.75rem;
  --tp-input-padding-x-md: 1rem;
  --tp-input-padding-x-lg: 1.25rem;

  /* Focus Ring */
  --tp-focus-ring-width: 2px;
  --tp-focus-ring-offset: 2px;
  --tp-focus-ring-color: var(--tp-primary);

  /* ============================================
     BUTTONS
     ============================================ */

  /* Button Heights */
  --tp-button-height-sm: 36px;
  --tp-button-height-md: 44px;
  --tp-button-height-lg: 52px;

  /* Button Padding */
  --tp-button-padding-x-sm: 1rem;
  --tp-button-padding-x-md: 1.5rem;
  --tp-button-padding-x-lg: 2rem;

  /* ============================================
     MISC
     ============================================ */

  /* Opacity */
  --tp-opacity-0: 0;
  --tp-opacity-5: 0.05;
  --tp-opacity-10: 0.1;
  --tp-opacity-20: 0.2;
  --tp-opacity-25: 0.25;
  --tp-opacity-30: 0.3;
  --tp-opacity-40: 0.4;
  --tp-opacity-50: 0.5;
  --tp-opacity-60: 0.6;
  --tp-opacity-70: 0.7;
  --tp-opacity-75: 0.75;
  --tp-opacity-80: 0.8;
  --tp-opacity-90: 0.9;
  --tp-opacity-95: 0.95;
  --tp-opacity-100: 1;

  /* Blur */
  --tp-blur-sm: 4px;
  --tp-blur-md: 8px;
  --tp-blur-lg: 12px;
  --tp-blur-xl: 16px;
  --tp-blur-2xl: 24px;

  /* Backdrop Blur */
  --tp-backdrop-blur-sm: blur(4px);
  --tp-backdrop-blur-md: blur(8px);
  --tp-backdrop-blur-lg: blur(12px);

  /* Touch Target Minimum (WCAG) */
  --tp-touch-target-min: 44px;
}

/* ============================================
   RESPONSIVE DESIGN TOKENS
   ============================================ */

/* Mobile */
@media (max-width: 767px) {
  :root {
    --tp-font-size-4xl: 2rem;
    --tp-font-size-3xl: 1.5rem;
    --tp-font-size-2xl: 1.25rem;
    --tp-container-padding: 1rem;
    --tp-header-height: var(--tp-header-height-mobile);
  }
}

/* Tablet and up */
@media (min-width: 768px) {
  :root {
    --tp-container-padding: 1.5rem;
  }
}

/* Desktop and up */
@media (min-width: 1024px) {
  :root {
    --tp-container-padding: 2rem;
  }
}

/* ============================================
   DARK MODE (Future Enhancement)
   ============================================ */

@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"],
  :root[data-theme="dark"] {
    /* Dark mode colors can be added here */
    /* For now, we're maintaining light mode only */
  }
}

/* ============================================
   PRINT STYLES
   ============================================ */

@media print {
  :root {
    --tp-shadow-sm: none;
    --tp-shadow-md: none;
    --tp-shadow-lg: none;
    --tp-shadow-xl: none;
  }
}