/**
 * COSAS3D — Design Tokens & CSS Custom Properties
 * Curated palette: Charcoal/Dark Graphite, Crisp White, Refined Greys, Restrained Precision Orange
 */

:root {
  /* Brand Palette — Charcoal / Dark Graphite Dominant */
  --color-bg-deep: #0e1013;
  --color-bg-canvas: #121418;
  --color-bg-surface: #181b21;
  --color-bg-surface-elevated: #20242c;
  --color-bg-surface-hover: #262b35;

  /* Crisp Whites & Neutrals */
  --color-text-primary: #f8f9fa;
  --color-text-secondary: #c4cad4;
  --color-text-muted: #838c9c;
  --color-text-dim: #545b68;

  /* Borders & Dividers */
  --color-border-subtle: rgba(255, 255, 255, 0.07);
  --color-border-medium: rgba(255, 255, 255, 0.14);
  --color-border-strong: rgba(255, 255, 255, 0.25);

  /* Restrained Technical Accent: Safety / Extrusion Orange */
  --color-accent-orange: #ff5a1f;
  --color-accent-orange-hover: #ff6e39;
  --color-accent-orange-active: #e64912;
  --color-accent-orange-subtle: rgba(255, 90, 31, 0.12);
  --color-accent-orange-glow: rgba(255, 90, 31, 0.25);

  /* Status Colors */
  --color-status-success: #10b981;
  --color-status-warning: #f59e0b;
  --color-status-info: #3b82f6;

  /* Typography Stacks */
  --font-family-display: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-family-body: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-family-mono: 'JetBrains Mono', 'SF Mono', Consolas, Menlo, monospace;

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

  /* Spacing Scale (8pt Grid) */
  --space-2xs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-4xl: 96px;
  --space-5xl: 128px;

  /* Radii — Precision Architectural (Restrained, not bubbly) */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-pill: 9999px;

  /* Shadows — Subtle Dark Atmosphere */
  --shadow-subtle: 0 2px 8px rgba(0, 0, 0, 0.25);
  --shadow-card: 0 4px 20px rgba(0, 0, 0, 0.35);
  --shadow-modal: 0 20px 48px -8px rgba(0, 0, 0, 0.65), 0 0 1px 1px rgba(255, 255, 255, 0.1);
  --shadow-orange-glow: 0 0 24px -4px var(--color-accent-orange-glow);

  /* Layout */
  --container-max-width: 1280px;
  --header-height: 72px;

  /* Transitions */
  --transition-fast: 150ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-normal: 250ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-smooth: 400ms cubic-bezier(0.16, 1, 0.3, 1);

  /* Z-Index Layers */
  --z-nav: 100;
  --z-cart: 150;
  --z-assistant: 180;
  --z-modal: 200;
  --z-toast: 300;
}