/* NØRTHBLOCK Color System & Design Tokens */
:root {
  /* Colors */
  --color-asphalt-black: #111111;
  --color-carbon: #1B1B1B;
  --color-concrete: #B8B8B2;
  --color-smoke: #E7E6E1;
  --color-off-white: #F5F3ED;
  --color-signal-orange: #FF5A1F; /* Main Accent */
  --color-acid-green: #C7FF3D; /* Special Statuses */
  
  --color-bg-primary: var(--color-asphalt-black);
  --color-bg-secondary: var(--color-carbon);
  --color-text-primary: var(--color-off-white);
  --color-text-secondary: var(--color-concrete);
  --color-text-muted: var(--color-smoke);

  /* Typography */
  --font-family-heading: 'Oswald', 'Arial Narrow', 'Roboto Condensed', sans-serif;
  --font-family-body: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --font-family-technical: 'IBM Plex Mono', 'Courier New', monospace;

  /* Spacing */
  --spacing-xxs: 4px;
  --spacing-xs: 8px;
  --spacing-sm: 12px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-xxl: 48px;
  --spacing-huge: 64px;

  /* Layout */
  --container-max-width: 1440px;
  --header-height-desktop: 80px;
  --header-height-mobile: 60px;
  --announcement-bar-height: 36px;
  
  /* Borders */
  --border-radius-none: 0;
  --border-color: rgba(184, 184, 178, 0.2); /* Concrete with opacity */
  --border-thickness: 1px;
  
  /* Shadows */
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 10px rgba(0, 0, 0, 0.2);
  --shadow-lg: 0 10px 20px rgba(0, 0, 0, 0.3);
  --shadow-inset: inset 0 2px 4px rgba(0, 0, 0, 0.1);
  
  /* Transitions */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.3s ease;
  --transition-slow: 0.5s ease;
  --transition-timing: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  
  /* Image Ratios */
  --product-image-ratio: 4 / 5;
}