/*!
 * Quack Track Inventory Management System - CSS Variables
 * Version: 2.0
 * Description: Design tokens and CSS custom properties
 */

/* ===================================================================
   CSS CUSTOM PROPERTIES (DESIGN TOKENS)
   ================================================================ */

/**
 * Design System Foundation
 * 
 * These CSS custom properties serve as the foundation of our design system.
 * They provide consistent values for colors, spacing, typography, and other
 * design elements throughout the application.
 * 
 * Usage: var(--property-name, fallback-value)
 * Example: color: var(--color-primary, #006A4E);
 */

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

  /* Primary brand colors - maintain existing green theme */
  --color-primary: #006A4E;           /* Main brand green */
  --color-primary-light: #1a7a5e;     /* Lighter shade for hover states */
  --color-primary-dark: #004d38;      /* Darker shade for active states */
  --color-accent: #FFD42A;            /* Brand yellow for highlights */
  --color-accent-dark: #e6bf24;       /* Darker yellow for hover states */
  
  /* ===== NEUTRAL COLORS ===== */

  /* Grayscale palette for text, backgrounds, and borders */
  --color-white: #fff;
  --color-gray-25: #fafafa;           /* Lightest gray for subtle backgrounds */
  --color-gray-50: #f9fafb;           /* Very light gray */
  --color-gray-100: #f3f4f6;          /* Light gray for disabled states */
  --color-gray-200: #e5e7eb;          /* Light border color */
  --color-gray-300: #d1d5db;          /* Default border color */
  --color-gray-400: #9ca3af;          /* Placeholder text */
  --color-gray-500: #6b7280;          /* Secondary text */
  --color-gray-600: #4b5563;          /* Body text */
  --color-gray-700: #374151;          /* Headings */
  --color-gray-800: #1f2937;          /* Dark text */
  --color-gray-900: #111827;          /* Darkest text */ 
 
  /* ===== SEMANTIC COLORS ===== */

  /* Status and feedback colors */
  --color-success: #10b981;           /* Success states and positive feedback */
  --color-warning: #f59e0b;           /* Warning states and caution */
  --color-error: #ef4444;             /* Error states and destructive actions */
  --color-info: #3b82f6;              /* Informational messages */
  
  /* ===== LEGACY COLOR MAPPINGS ===== */

  /* Maintain compatibility with existing styles */
  --color-background-primary: #f0f0f0;
  --color-text-primary: #333;
  --color-border-light: #ccc;
  --color-border-medium: #888;
  --color-table-header: #f7f7f7;
  --color-flash-default: #eae69e;
  --color-flash-error: #d9534f;
  
  /* ===== ACCESSIBILITY COLORS ===== */

  /* High contrast colors for WCAG compliance */
  --color-text-high-contrast: #000;
  --color-focus-ring: #2563eb;        /* Blue focus ring for accessibility */
  --color-focus-ring-offset: #fff;
  --color-success-high-contrast: #065f46;
  --color-warning-high-contrast: #92400e;
  --color-error-high-contrast: #991b1b;
  --color-success-bg-contrast: #d1fae5;
  --color-warning-bg-contrast: #fef3c7;
  --color-error-bg-contrast: #fee2e2;
  
  /* ===== SPACING SCALE ===== */

  /* Consistent spacing system based on 4px grid */
  --space-xs: 0.25rem;    /* 4px - Minimal spacing */
  --space-sm: 0.5rem;     /* 8px - Small spacing */
  --space-md: 1rem;       /* 16px - Default spacing */
  --space-lg: 1.5rem;     /* 24px - Large spacing */
  --space-xl: 2rem;       /* 32px - Extra large spacing */
  --space-2xl: 3rem;      /* 48px - Maximum spacing */
  
  /* Legacy spacing mappings for backward compatibility */
  --space-8: 0.5rem;      /* 8px */
  --space-10: 0.625rem;   /* 10px */
  --space-12: 0.75rem;    /* 12px */
  --space-16: 1rem;       /* 16px */
  --space-20: 1.25rem;    /* 20px */
  --space-24: 1.5rem;     /* 24px */
  --space-60: 3.75rem;    /* 60px */
  
  /* ===== TYPOGRAPHY SYSTEM ===== */

  /* Font families with system font stack for performance */
  --font-family-base: system-ui, -apple-system, "Segoe UI", roboto, "Helvetica Neue", arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-family-mono: ui-monospace, sfmono-regular, "SF Mono", consolas, "Liberation Mono", menlo, monospace;
  
  /* Font size scale - modular scale based on 16px base */
  --font-size-xs: 0.75rem;     /* 12px - Small labels */
  --font-size-sm: 0.875rem;    /* 14px - Secondary text */
  --font-size-base: 1rem;      /* 16px - Body text */
  --font-size-lg: 1.125rem;    /* 18px - Large body text */
  --font-size-xl: 1.25rem;     /* 20px - Small headings */
  --font-size-2xl: 1.5rem;     /* 24px - Medium headings */
  --font-size-3xl: 1.875rem;   /* 30px - Large headings */
  --font-size-4xl: 2.25rem;    /* 36px - Extra large headings */
  
  /* Font weights for semantic usage */
  --font-weight-light: 300;
  --font-weight-normal: 400;    /* Default body text */
  --font-weight-medium: 500;    /* Emphasized text */
  --font-weight-semibold: 600;  /* Headings */
  --font-weight-bold: 700;      /* Strong emphasis */
  --font-weight-extrabold: 800; /* Maximum emphasis */
  
  /* Line heights for optimal readability */
  --line-height-none: 1;        /* Tight spacing for headings */
  --line-height-tight: 1.25;    /* Headings */
  --line-height-snug: 1.375;    /* Subheadings */
  --line-height-normal: 1.5;    /* Body text */
  --line-height-relaxed: 1.625; /* Comfortable reading */
  --line-height-loose: 2;       /* Maximum spacing */
  
  /* Letter spacing for typography fine-tuning */
  --letter-spacing-tighter: -0.05em;
  --letter-spacing-tight: -0.025em;
  --letter-spacing-normal: 0em;
  --letter-spacing-wide: 0.025em;
  --letter-spacing-wider: 0.05em;
  --letter-spacing-widest: 0.1em;
  
  /* ===== SHADOW SYSTEM ===== */

  /* Layered shadow system for depth and hierarchy */
  --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 5%);                                    /* Subtle shadow */
  --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 10%), 0 1px 2px 0 rgb(0 0 0 / 6%);   /* Small shadow */
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 10%), 0 2px 4px -1px rgb(0 0 0 / 6%); /* Medium shadow */
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 10%), 0 4px 6px -2px rgb(0 0 0 / 5%); /* Large shadow */
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 10%), 0 10px 10px -5px rgb(0 0 0 / 4%); /* Extra large shadow */
  
  /* Legacy shadow mappings for backward compatibility */
  --shadow-card: 0 2px 4px rgb(0 0 0 / 10%);
  --shadow-modal: 0 5px 15px rgb(0 0 0 / 30%);
  --shadow-detail: 0 2px 4px rgb(0 0 0 / 10%);
  
  /* ===== BORDER RADIUS SYSTEM ===== */

  /* Consistent border radius scale */
  --radius-none: 0;
  --radius-sm: 0.25rem;    /* 4px - Small elements */
  --radius-md: 0.375rem;   /* 6px - Default radius */
  --radius-lg: 0.5rem;     /* 8px - Cards and containers */
  --radius-xl: 0.75rem;    /* 12px - Large containers */
  --radius-2xl: 1rem;      /* 16px - Maximum radius */
  --radius-full: 9999px;   /* Circular elements */
  
  /* Legacy radius mappings */
  --radius-6: 0.375rem;    /* 6px */
  --radius-8: 0.5rem;      /* 8px */
  --radius-10: 0.625rem;   /* 10px */
  
  /* ===== TRANSITION SYSTEM ===== */

  /* Consistent timing for smooth interactions */
  --transition-fast: 0.15s ease-in-out;   /* Quick interactions */
  --transition-base: 0.2s ease-in-out;    /* Default transitions */
  --transition-slow: 0.3s ease-in-out;    /* Slower animations */
  
  /* ===== Z-INDEX SCALE ===== */

  /* Layering system for proper stacking context */
  --z-dropdown: 1000;      /* Dropdown menus */
  --z-sticky: 1020;        /* Sticky elements */
  --z-fixed: 1030;         /* Fixed positioning */
  --z-modal-backdrop: 1040; /* Modal backdrops */
  --z-modal: 1050;         /* Modal content */
  --z-popover: 1060;       /* Popovers and tooltips */
  --z-tooltip: 1070;       /* Tooltips (highest) */
  
  /* ===== ANIMATION SYSTEM ===== */

  /* Animation durations for consistent timing */
  --duration-fast: 150ms;      /* Quick feedback */
  --duration-base: 200ms;      /* Default duration */
  --duration-slow: 300ms;      /* Slower animations */
  --duration-slower: 500ms;    /* Complex animations */
  
  /* Animation easing functions for natural motion */
  --ease-linear: linear;
  --ease-in: cubic-bezier(0.4, 0, 1, 1);           /* Accelerating */
  --ease-out: cubic-bezier(0, 0, 0.2, 1);          /* Decelerating */
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);     /* Smooth */
  --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55); /* Bouncy */
  --ease-elastic: cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Elastic */
}