/**
 * Storage Caves Design System
 * Enterprise-grade color palette and design tokens
 * Brand: Industrial red (#B42518) + Dark charcoal/graphite
 */

:root {
  /* Force light mode globally; prevent system dark mode overrides */
  color-scheme: light only;

  /* ===== STORAGE CAVES BRAND COLORS ===== */

  /* Primary Brand Red - From logo */
  --color-primary: #b42518;
  --color-primary-hover: #962014;
  --color-primary-light: #f4dad6;
  --color-primary-dark: #7a1a11;
  --color-primary-rgb: 180, 37, 24;

  /* Graphite/Charcoal - Industrial feel */
  --color-graphite-900: #1a1a1a;
  --color-graphite-800: #2d2d2d;
  --color-graphite-700: #404040;
  --color-graphite-600: #525252;
  --color-graphite-500: #6b6b6b;
  --color-graphite-400: #858585;
  --color-graphite-300: #a3a3a3;
  --color-graphite-200: #d4d4d4;
  --color-graphite-100: #e5e5e5;
  --color-graphite-50: #f5f5f5;

  /* ===== BACKGROUNDS ===== */
  --color-bg: #fff;
  --color-bg-secondary: #fafafa;
  --color-bg-tertiary: #f5f5f5;
  --color-bg-dark: var(--color-graphite-900);
  --color-bg-elevated: #fff;
  --color-bg-panel: #fff;

  /* ===== TEXT COLORS ===== */
  --color-text-primary: var(--color-graphite-900);
  --color-text-secondary: var(--color-graphite-600);
  --color-text-tertiary: var(--color-graphite-400);
  --color-text-disabled: var(--color-graphite-300);
  --color-text-inverse: #fff;
  --color-text: var(--color-graphite-900); /* Alias for consistency */
  --color-white: #fff; /* Explicit white token */

  /* ===== BORDERS ===== */
  --color-border: var(--color-graphite-200);
  --color-border-hover: var(--color-graphite-300);
  --color-border-focus: var(--color-primary);
  --color-border-light: var(--color-graphite-100);

  /* ===== SEMANTIC COLORS ===== */
  --color-success: #27ae60;
  --color-warning: #f39c12;
  --color-danger: #e74c3c;
  --color-info: #3498db;

  /* ===== SPACING SYSTEM (4px grid) ===== */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 12px;
  --spacing-lg: 16px;
  --spacing-xl: 20px;
  --spacing-2xl: 24px;
  --spacing-3xl: 32px;
  --spacing-4xl: 40px;
  --spacing-5xl: 48px;
  --spacing-6xl: 64px;

  /* ===== TYPOGRAPHY ===== */
  --font-family:
    -apple-system, blinkmacsystemfont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Helvetica Neue',
    sans-serif;
  --font-family-mono: 'SF Mono', 'Monaco', 'Inconsolata', 'Courier New', monospace;
  --font-size-xs: 11px;
  --font-size-sm: 13px;
  --font-size-base: 14px;
  --font-size-md: 15px;
  --font-size-lg: 16px;
  --font-size-xl: 18px;
  --font-size-2xl: 20px;
  --font-size-3xl: 24px;
  --font-size-4xl: 30px;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --line-height-tight: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;

  /* ===== SHADOWS (minimal, professional) ===== */
  --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 5%);
  --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 10%), 0 1px 2px 0 rgb(0 0 0 / 6%);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 10%), 0 2px 4px -1px rgb(0 0 0 / 6%);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 10%), 0 4px 6px -2px rgb(0 0 0 / 5%);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 10%), 0 10px 10px -5px rgb(0 0 0 / 4%);

  /* ===== BORDER RADIUS ===== */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-2xl: 16px;
  --radius-full: 9999px;

  /* Component-specific radius aliases (for clarity) */
  --radius-modal: var(--radius-xl);
  --radius-input: var(--radius-lg);
  --radius-button: var(--radius-lg);
  --radius-card: var(--radius-md);

  /* ===== Z-INDEX LAYERS ===== */
  --z-base: 1;
  --z-sidebar: 10;
  --z-toolbar: 20;
  --z-header: 30;
  --z-dropdown: 100;
  --z-overlay: 900;
  --z-modal: 1000;
  --z-tooltip: 2000;

  /* Component-specific z-index aliases */
  --z-backdrop: var(--z-overlay);
  --z-modal-backdrop: var(--z-overlay);
  --z-datepicker: 1200;
  --z-toast: 2500;

  /* ===== MODAL TOKENS (aligned with CMS) ===== */
  --modal-bg: var(--color-bg);
  --modal-border: var(--color-border);
  --modal-border-light: var(--color-border-light);
  --modal-text: var(--color-text-primary);
  --modal-text-secondary: var(--color-text-secondary);
  --modal-input-bg: var(--color-bg-tertiary); /* Light gray for hover states */

  /* ===== TRANSITIONS ===== */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);

  /* ===== MOBILE-SPECIFIC ===== */
  --mobile-header-height: 56px;
  --mobile-tab-height: 60px;
  --mobile-touch-target: 44px;
  --mobile-safe-area-bottom: env(safe-area-inset-bottom, 0px);
  --mobile-safe-area-top: env(safe-area-inset-top, 0px);
}

/* Additional enforcement for UA elements (Safari/WebKit) */
html {
  color-scheme: light only;
}

body {
  color-scheme: light only;
}