/* ═══════════════════════════════════════════════════════════
    BOONSOOK POS V5 PRO — Design System (CSS Variables)
    Phase 4: UI/UX Polish
    ═════════════════════════════════════════════════════════ */

:root {
  /* ═══ COLORS — Modern Palette ═══ */
  
  /* Primary Colors */
  --primary-50:  #f0f9ff;
  --primary-100: #e0f2fe;
  --primary-200: #bae6fd;
  --primary-300: #7dd3fc;
  --primary-400: #38bdf8;
  --primary-500: #0ea5e9;  /* Main blue */
  --primary-600: #0284c7;  /* Darker blue */
  --primary-700: #0369a1;  /* Even darker */
  --primary-800: #075985;
  --primary-900: #0c3d66;

  /* Secondary Colors (Success/Green) */
  --success-50:  #f0fdf4;
  --success-100: #dcfce7;
  --success-200: #bbf7d0;
  --success-300: #86efac;
  --success-400: #4ade80;
  --success-500: #22c55e;  /* Bright green */
  --success-600: #16a34a;  /* Dark green */
  --success-700: #15803d;
  --success-800: #166534;
  --success-900: #145231;

  /* Tertiary Colors (Warning/Amber) */
  --warning-50:  #fffbeb;
  --warning-100: #fef3c7;
  --warning-200: #fde68a;
  --warning-300: #fcd34d;
  --warning-400: #fbbf24;
  --warning-500: #f59e0b;  /* Amber */
  --warning-600: #d97706;
  --warning-700: #b45309;
  --warning-800: #92400e;
  --warning-900: #78350f;

  /* Danger/Red */
  --danger-50:  #fef2f2;
  --danger-100: #fee2e2;
  --danger-200: #fecaca;
  --danger-300: #fca5a5;
  --danger-400: #f87171;
  --danger-500: #ef4444;  /* Bright red */
  --danger-600: #dc2626;  /* Dark red */
  --danger-700: #b91c1c;
  --danger-800: #991b1b;
  --danger-900: #7f1d1d;

  /* Neutral/Gray */
  --neutral-50:  #fafafa;
  --neutral-100: #f5f5f5;
  --neutral-200: #e5e5e5;
  --neutral-300: #d4d4d4;
  --neutral-400: #a3a3a3;
  --neutral-500: #737373;
  --neutral-600: #525252;
  --neutral-700: #404040;
  --neutral-800: #262626;
  --neutral-900: #171717;

  /* Dark Mode Colors */
  --dark-bg:     #0f172a;  /* Very dark blue */
  --dark-surface: #1e293b; /* Dark surface */
  --dark-border: #334155;  /* Dark border */
  --dark-text:   #f1f5f9;  /* Light text on dark */

  /* ═══ SEMANTIC COLORS ═══ */
  --color-background: #ffffff;
  --color-surface: #f9fafb;
  --color-border: #e5e7eb;
  --color-text: #1f2937;
  --color-text-secondary: #6b7280;
  --color-text-muted: #9ca3af;

  /* ═══ TYPOGRAPHY ═══ */
  --font-family-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Open Sans", "Helvetica Neue", sans-serif;
  --font-family-mono: "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", Consolas, "Courier New", monospace;

  /* Font Sizes (Modular Scale 1.125) */
  --text-xs:   0.75rem;    /* 12px */
  --text-sm:   0.875rem;   /* 14px */
  --text-base: 1rem;       /* 16px */
  --text-lg:   1.125rem;   /* 18px */
  --text-xl:   1.25rem;    /* 20px */
  --text-2xl:  1.5rem;     /* 24px */
  --text-3xl:  1.875rem;   /* 30px */
  --text-4xl:  2.25rem;    /* 36px */
  --text-5xl:  2.813rem;   /* 45px */

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

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

  /* ═══ SPACING ═══ */
  --space-0:  0;
  --space-1:  0.25rem;  /* 4px */
  --space-2:  0.5rem;   /* 8px */
  --space-3:  0.75rem;  /* 12px */
  --space-4:  1rem;     /* 16px */
  --space-6:  1.5rem;   /* 24px */
  --space-8:  2rem;     /* 32px */
  --space-12: 3rem;     /* 48px */
  --space-16: 4rem;     /* 64px */
  --space-20: 5rem;     /* 80px */

  /* ═══ BORDER RADIUS ═══ */
  --radius-none:  0;
  --radius-sm:    0.125rem;  /* 2px */
  --radius-base:  0.375rem;  /* 6px */
  --radius-md:    0.5rem;    /* 8px */
  --radius-lg:    0.75rem;   /* 12px */
  --radius-xl:    1rem;      /* 16px */
  --radius-2xl:   1.5rem;    /* 24px */
  --radius-full:  9999px;

  /* ═══ SHADOWS ═══ */
  --shadow-none: 0 0 0 0 rgba(0, 0, 0, 0);
  --shadow-sm:   0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-base: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  --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);

  /* ═══ TRANSITIONS ═══ */
  --transition-fast:   150ms ease-in-out;
  --transition-base:   200ms ease-in-out;
  --transition-slow:   300ms ease-in-out;
  --transition-slower: 500ms ease-in-out;

  /* ═══ Z-INDEX ═══ */
  --z-dropdown:  1000;
  --z-sticky:    1020;
  --z-fixed:     1030;
  --z-modal:     1040;
  --z-popover:   1050;
  --z-tooltip:   1070;
}

/* ═══ DARK MODE ═══ */
@media (prefers-color-scheme: dark) {
  :root {
    --color-background: #0f172a;
    --color-surface: #1e293b;
    --color-border: #334155;
    --color-text: #f1f5f9;
    --color-text-secondary: #cbd5e1;
    --color-text-muted: #94a3b8;
  }
}

/* ═══ COMPONENT VARIABLES ═══ */

/* Button Variants */
:root {
  --btn-primary-bg: var(--primary-600);
  --btn-primary-text: white;
  --btn-primary-hover: var(--primary-700);
  --btn-primary-active: var(--primary-800);

  --btn-secondary-bg: var(--neutral-200);
  --btn-secondary-text: var(--neutral-900);
  --btn-secondary-hover: var(--neutral-300);

  --btn-danger-bg: var(--danger-600);
  --btn-danger-text: white;
  --btn-danger-hover: var(--danger-700);

  --btn-success-bg: var(--success-600);
  --btn-success-text: white;
  --btn-success-hover: var(--success-700);
}

/* Input & Form Styling */
:root {
  --input-bg: var(--color-background);
  --input-border: var(--color-border);
  --input-border-focus: var(--primary-500);
  --input-text: var(--color-text);
  --input-placeholder: var(--color-text-muted);

  --input-padding-x: var(--space-3);
  --input-padding-y: var(--space-2);
  --input-height: 2.5rem;
  --input-border-radius: var(--radius-md);
  --input-border-width: 1px;
}

/* Card & Panel */
:root {
  --card-bg: var(--color-surface);
  --card-border: var(--color-border);
  --card-border-radius: var(--radius-lg);
  --card-padding: var(--space-4);
  --card-shadow: var(--shadow-sm);
}