/**
 * Design System - CSS Variables
 * Propan Soğutma Sistemleri
 * Updated for UX Audit Recommendations
 */

:root {
  /* ========================================
     COLOR SYSTEM
     ======================================== */

  /* Primary Colors - Brand Identity */
  --color-primary-100: #E6F2FF;
  --color-primary-200: #BFDEFF;
  --color-primary-300: #99CAFF;
  --color-primary-400: #66AFFF;
  --color-primary-500: #0066CC;  /* Main brand blue */
  --color-primary-600: #0052A3;  /* Hover state */
  --color-primary-700: #003D7A;
  --color-primary-800: #002952;
  --color-primary-900: #001429;

  /* Secondary Colors - Accent */
  --color-secondary-100: #FFE8DF;
  --color-secondary-200: #FFCCB9;
  --color-secondary-300: #FFB094;
  --color-secondary-400: #FF8B5E;
  --color-secondary-500: #FF6B35;  /* Main orange accent */
  --color-secondary-600: #E55A28;
  --color-secondary-700: #CC491B;
  --color-secondary-800: #B33810;
  --color-secondary-900: #992707;

  /* Neutral Colors - Gray Scale */
  --color-neutral-000: #FFFFFF;
  --color-neutral-50: #FAFAFA;
  --color-neutral-100: #F8F9FA;
  --color-neutral-200: #E9ECEF;
  --color-neutral-300: #DEE2E6;
  --color-neutral-400: #CED4DA;
  --color-neutral-500: #ADB5BD;
  --color-neutral-600: #6C757D;  /* Secondary text */
  --color-neutral-700: #495057;
  --color-neutral-800: #343A40;
  --color-neutral-900: #212529;  /* Main text */

  /* Semantic Colors */
  --color-success-100: #D4EDDA;
  --color-success-500: #28A745;
  --color-success-700: #1E7E34;

  --color-warning-100: #FFF3CD;
  --color-warning-500: #FFC107;
  --color-warning-700: #E0A800;

  --color-error-100: #F8D7DA;
  --color-error-500: #DC3545;
  --color-error-700: #C82333;

  --color-info-100: #D1ECF1;
  --color-info-500: #17A2B8;
  --color-info-700: #117A8B;

  /* Feature-specific Colors */
  --color-green: #28A745;
  --color-blue: #0066CC;
  --color-orange: #FF6B35;
  --color-purple: #9B51E0;
  --color-teal: #17A2B8;

  /* Gradient Backgrounds */
  --gradient-primary: linear-gradient(135deg, #0066CC 0%, #0052A3 100%);
  --gradient-secondary: linear-gradient(135deg, #FF6B35 0%, #E55A28 100%);
  --gradient-hero: linear-gradient(135deg, rgba(0, 102, 204, 0.95) 0%, rgba(0, 82, 163, 0.95) 100%);
  --gradient-overlay: linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.2) 100%);

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

  /* Font Families */
  --font-heading: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'Roboto Mono', 'Courier New', monospace;

  /* Font Sizes - Responsive Scale (using clamp) */
  --fs-900: clamp(3rem, 8vw, 5rem);        /* Hero H1 */
  --fs-800: clamp(2.25rem, 5vw, 3.5rem);   /* Page H1 */
  --fs-700: clamp(1.75rem, 3vw, 2.5rem);   /* H2 */
  --fs-600: clamp(1.5rem, 2.5vw, 2rem);    /* H3 */
  --fs-500: clamp(1.25rem, 2vw, 1.5rem);   /* H4 */
  --fs-400: 1rem;                           /* Body (16px) */
  --fs-300: 0.875rem;                       /* Small (14px) */
  --fs-200: 0.75rem;                        /* Tiny (12px) */

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

  /* Line Heights */
  --lh-tight: 1.2;    /* Headings */
  --lh-normal: 1.5;   /* Body text */
  --lh-relaxed: 1.6;  /* Paragraphs */
  --lh-loose: 1.8;    /* Wide paragraphs */

  /* Letter Spacing */
  --ls-tight: -0.02em;   /* Large headings */
  --ls-normal: 0;
  --ls-wide: 0.05em;     /* Buttons, labels */
  --ls-wider: 0.1em;     /* All caps text */

  /* ========================================
     SPACING SYSTEM
     ======================================== */

  /* Based on 8px grid */
  --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 */
  --space-32: 8rem;     /* 128px */

  /* Section Padding */
  --section-padding: clamp(3rem, 8vw, 6rem);
  --section-padding-small: clamp(2rem, 5vw, 3rem);

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

  /* Container */
  --container-max-width: 1200px;
  --container-padding: 1.5rem;

  /* Breakpoints (for JS) */
  --breakpoint-xs: 480px;
  --breakpoint-sm: 768px;
  --breakpoint-md: 1024px;
  --breakpoint-lg: 1440px;

  /* Grid */
  --grid-gap: var(--space-6);

  /* ========================================
     BORDERS & RADIUS
     ======================================== */

  --border-radius-sm: 0.25rem;   /* 4px */
  --border-radius-md: 0.5rem;    /* 8px */
  --border-radius-lg: 1rem;      /* 16px */
  --border-radius-xl: 1.5rem;    /* 24px */
  --border-radius-full: 9999px;  /* Circular */

  --border-width-thin: 1px;
  --border-width-medium: 2px;
  --border-width-thick: 4px;

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

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

  /* Colored Shadows */
  --shadow-primary: 0 8px 16px rgba(0, 102, 204, 0.3);
  --shadow-secondary: 0 8px 16px rgba(255, 107, 53, 0.3);

  /* ========================================
     TRANSITIONS
     ======================================== */

  --transition-fast: 150ms ease-in-out;
  --transition-base: 250ms ease-in-out;
  --transition-slow: 350ms ease-in-out;

  --easing-default: cubic-bezier(0.4, 0, 0.2, 1);
  --easing-in: cubic-bezier(0.4, 0, 1, 1);
  --easing-out: cubic-bezier(0, 0, 0.2, 1);
  --easing-in-out: cubic-bezier(0.4, 0, 0.2, 1);

  /* ========================================
     Z-INDEX SYSTEM
     ======================================== */

  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-tooltip: 1070;

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

  --input-height: 44px;           /* WCAG touch target */
  --input-padding-x: var(--space-4);
  --input-padding-y: var(--space-3);
  --input-border-radius: var(--border-radius-md);
  --input-border-color: var(--color-neutral-300);
  --input-border-color-focus: var(--color-primary-500);
  --input-bg: var(--color-neutral-000);

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

  --btn-height-sm: 36px;
  --btn-height-md: 44px;
  --btn-height-lg: 56px;
  --btn-padding-x-sm: var(--space-4);
  --btn-padding-x-md: var(--space-6);
  --btn-padding-x-lg: var(--space-8);
  --btn-border-radius: var(--border-radius-md);

  /* ========================================
     ACCESSIBILITY
     ======================================== */

  /* Focus Ring */
  --focus-ring-width: 3px;
  --focus-ring-offset: 2px;
  --focus-ring-color: var(--color-secondary-500);
}

/* ========================================
   DARK MODE (Optional)
   ======================================== */

@media (prefers-color-scheme: dark) {
  :root {
    /* Override colors for dark mode if needed */
    /* Currently keeping light mode only */
  }
}

/* ========================================
   REDUCED MOTION
   ======================================== */

@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-fast: 0ms;
    --transition-base: 0ms;
    --transition-slow: 0ms;
  }

  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

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

@media print {
  :root {
    --color-primary-500: #000;
    --color-secondary-500: #000;
  }
}