/**
 * SIAPI Design Token System
 *
 * Core design tokens for consistent theming across the system.
 * Brand color: Teal (#008080) - Simple, Reliable, Accessible
 *
 * WCAG AA Compliance:
 * - Primary dark (#006666): 4.74:1 contrast on white ✓
 * - Primary (#008080): 3.48:1 contrast on white (use for backgrounds only)
 * - All text colors meet WCAG AA 4.5:1 minimum contrast ratio
 */

:root {
  /* ============================================
     BRAND COLORS - Teal Palette
     ============================================ */

  /* Primary teal colors */
  --color-primary: #008080;           /* Base teal - for backgrounds */
  --color-primary-dark: #006666;      /* Dark teal - for text/borders (WCAG AA compliant: 4.74:1) */
  --color-primary-darker: #004d4d;    /* Darker teal - for hover states (7.27:1) */
  --color-primary-light: #00a3a3;     /* Light teal - for hover backgrounds */
  --color-primary-lighter: #e6f5f5;   /* Very light teal - for subtle backgrounds */
  --color-primary-pale: #f0fafa;      /* Pale teal - for cards and sections */

  /* Primary with opacity variations */
  --color-primary-rgb: 0, 128, 128;
  --color-primary-10: rgba(0, 128, 128, 0.1);
  --color-primary-20: rgba(0, 128, 128, 0.2);
  --color-primary-50: rgba(0, 128, 128, 0.5);

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

  /* Success - Green */
  --color-success: #198754;
  --color-success-dark: #146c43;
  --color-success-light: #d1e7dd;
  --color-success-pale: #f0f9f5;

  /* Warning - Amber */
  --color-warning: #fd7e14;
  --color-warning-dark: #ca6510;
  --color-warning-light: #ffe5d0;
  --color-warning-pale: #fff8f0;

  /* Danger - Red */
  --color-danger: #dc3545;
  --color-danger-dark: #b02a37;
  --color-danger-light: #f8d7da;
  --color-danger-pale: #fef5f6;

  /* Info - Blue */
  --color-info: #0dcaf0;
  --color-info-dark: #087990;
  --color-info-light: #cff4fc;
  --color-info-pale: #f0fbff;

  /* ============================================
     NEUTRAL COLORS - Tinted with Teal
     ============================================ */

  /* Neutrals subtly tinted toward brand teal */
  --color-gray-50: #f9fafa;           /* Lightest - subtle teal tint */
  --color-gray-100: #f3f5f5;
  --color-gray-200: #e8ecec;
  --color-gray-300: #d4dcdc;
  --color-gray-400: #b0bcbc;
  --color-gray-500: #8a9999;          /* Mid gray */
  --color-gray-600: #6b7a7a;
  --color-gray-700: #4d5c5c;
  --color-gray-800: #2f3d3d;
  --color-gray-900: #1a2424;          /* Darkest */

  /* Text colors */
  --color-text-primary: #1a2424;      /* Main text */
  --color-text-secondary: #4d5c5c;    /* Secondary text */
  --color-text-muted: #6b7a7a;        /* Muted/helper text */
  --color-text-inverse: #ffffff;      /* Text on dark backgrounds */

  /* Background colors */
  --color-bg-body: #F1F2F7;           /* Page background (Unified with index.css) */
  --color-bg-surface: #ffffff;        /* Cards, panels */
  --color-bg-subtle: #f3f5f5;         /* Subtle highlights */
  --color-bg-hover: #e8ecec;          /* Hover states */

  /* Border colors */
  --color-border-light: #e8ecec;
  --color-border-medium: #d4dcdc;
  --color-border-dark: #b0bcbc;

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

  /* Font families - System font stack for performance */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji",
               "Segoe UI Emoji", "Segoe UI Symbol";
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Consolas,
               "Liberation Mono", Menlo, monospace;

  /* Font sizes - Modular scale (1.25 ratio) */
  --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.25rem;      /* 20px */
  --font-size-2xl: 1.5rem;      /* 24px */
  --font-size-3xl: 1.875rem;    /* 30px */
  --font-size-4xl: 2.25rem;     /* 36px */

  /* Font weights */
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Line heights */
  --line-height-tight: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;

  /* ============================================
     SPACING - Consistent rhythm (8px base)
     ============================================ */

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

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

  /* Border radius */
  --radius-sm: 0.25rem;    /* 4px */
  --radius-md: 0.375rem;   /* 6px */
  --radius-lg: 0.5rem;     /* 8px */
  --radius-xl: 0.75rem;    /* 12px */
  --radius-2xl: 1rem;      /* 16px */
  --radius-full: 9999px;   /* Pill shape */

  /* 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);

  /* Focus ring - WCAG compliant */
  --focus-ring-color: var(--color-primary-dark);
  --focus-ring-width: 2px;
  --focus-ring-offset: 2px;
  --focus-ring: 0 0 0 var(--focus-ring-width) var(--focus-ring-color);

  /* Touch targets - minimum 44x44px */
  --touch-target-min: 44px;

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

  /* Durations */
  --duration-fast: 150ms;
  --duration-base: 200ms;
  --duration-slow: 300ms;
  --duration-slower: 500ms;

  /* Easing functions - Natural deceleration */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);        /* Exponential out */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);    /* Smooth in-out */
  --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);  /* Subtle bounce */

  /* Standard transitions */
  --transition-fast: all var(--duration-fast) var(--ease-out);
  --transition-base: all var(--duration-base) var(--ease-out);
  --transition-slow: all var(--duration-slow) var(--ease-out);

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

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

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

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

  *,
  *::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-body: #ffffff;
    --color-bg-surface: #ffffff;
    --color-text-primary: #000000;
    --shadow-sm: none;
    --shadow-md: none;
    --shadow-lg: none;
    --shadow-xl: none;
  }
}