/**
 * Drip of Street — Complete Design Tokens
 *
 * Centralized, semantic design tokens engineered for an independent
 * luxury streetwear e-commerce architecture.
 *
 * Prefix: --dos-
 * Strict Compliance: WCAG 2.1 AA Contrast, 4:5 Product Media, Fluid Rhythm
 */

:root {
  /* ==========================================================================
     1. BRAND COLOR PALETTE (CORE)
     ========================================================================== */
  --dos-color-black: #111111;
  --dos-color-white: #FFFFFF;
  --dos-color-off-white: #F5F5F3;
  --dos-color-gray: #777777;
  --dos-color-border: #E8E8E8;
  --dos-color-accent: #B5252D;

  /* Aliases for backwards compatibility & cross-module interoperability */
  --dos-black: var(--dos-color-black);
  --dos-white: var(--dos-color-white);
  --dos-off-white: var(--dos-color-off-white);
  --dos-gray: var(--dos-color-gray);
  --dos-border: var(--dos-color-border);
  --dos-accent: var(--dos-color-accent);

  /* Global Unprefixed Token Aliases */
  --color-black: var(--dos-color-black);
  --color-white: var(--dos-color-white);
  --color-offwhite: var(--dos-color-off-white);
  --color-off-white: var(--dos-color-off-white);
  --color-gray: var(--dos-color-gray);
  --color-border: var(--dos-color-border);
  --color-accent: var(--dos-color-accent);
  --color-dark-surface: var(--dos-color-dark-surface);
  --color-gray-dark: #333333;
  --color-gray-light: #EFEFEF;

  /* Global Unprefixed Spacing Aliases */
  --spacing-3xs: 2px;
  --spacing-2xs: 4px;
  --spacing-xs: 8px;
  --spacing-sm: 12px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-2xl: 48px;

  /* Global Font Family Aliases */
  --font-heading: 'Oswald', sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --dos-font-heading: 'Oswald', sans-serif;
  --dos-font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Tonal Derivatives & Utility Shades */
  --dos-color-dark-surface: #181818;
  --dos-color-dark-elevated: #222222;
  --dos-color-gray-dark: #333333;
  --dos-color-gray-mid: #555555;
  --dos-color-gray-light: #EFEFEF;
  --dos-color-gray-soft: #F9F9F8;
  --dos-color-border-dark: #2A2A2A;

  /* ==========================================================================
     2. SEMANTIC TOKENS
     ========================================================================== */

  /* Backgrounds */
  --dos-bg-body: var(--dos-color-white);
  --dos-bg-surface: var(--dos-color-off-white);
  --dos-bg-card: var(--dos-color-off-white);
  --dos-bg-card-hover: #ECECE9;
  --dos-bg-dark: var(--dos-color-black);
  --dos-bg-dark-surface: var(--dos-color-dark-surface);
  --dos-bg-accent: var(--dos-color-accent);
  --dos-bg-subtle: var(--dos-color-gray-soft);
  --dos-bg-skeleton: #E6E6E3;

  /* Typography / Text */
  --dos-text-primary: var(--dos-color-black);
  --dos-text-secondary: var(--dos-color-gray-mid);
  --dos-text-muted: var(--dos-color-gray);
  --dos-text-inverse: var(--dos-color-white);
  --dos-text-inverse-muted: #A0A0A0;
  --dos-text-accent: var(--dos-color-accent);
  --dos-text-sale: var(--dos-color-accent);

  /* Borders */
  --dos-border-subtle: var(--dos-color-border);
  --dos-border-strong: var(--dos-color-black);
  --dos-border-dark: var(--dos-color-border-dark);
  --dos-border-accent: var(--dos-color-accent);
  --dos-border-focus: var(--dos-color-black);

  /* Interactive States */
  --dos-state-hover-overlay: rgba(17, 17, 17, 0.04);
  --dos-state-active-overlay: rgba(17, 17, 17, 0.08);
  --dos-state-disabled-opacity: 0.45;
  --dos-state-soldout-overlay: rgba(17, 17, 17, 0.65);

  /* Status Colors */
  --dos-status-success: #1B7A43;
  --dos-status-warning: #C97A10;
  --dos-status-error: var(--dos-color-accent);
  --dos-status-info: #1F5F8B;

  /* Overlays & Backdrops */
  --dos-overlay-light: rgba(245, 245, 243, 0.85);
  --dos-overlay-dark: rgba(17, 17, 17, 0.65);
  --dos-overlay-drawer: rgba(17, 17, 17, 0.7);

  /* ==========================================================================
     3. TYPOGRAPHY TOKENS
     ========================================================================== */
  --dos-font-heading: "Oswald", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --dos-font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --dos-heading-font: var(--dos-font-heading);
  --dos-body-font: var(--dos-font-body);

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

  /* Letter Spacings */
  --dos-tracking-tighter: -0.02em;
  --dos-tracking-normal: 0em;
  --dos-tracking-wide: 0.04em;
  --dos-tracking-wider: 0.08em;
  --dos-tracking-widest: 0.15em;

  /* Line Heights */
  --dos-leading-tight: 1.05;
  --dos-leading-snug: 1.25;
  --dos-leading-normal: 1.6;
  --dos-leading-relaxed: 1.75;

  /* ==========================================================================
     4. SPACING SCALE (8pt Harmonic Baseline)
     ========================================================================== */
  --dos-space-3xs: 2px;
  --dos-space-2xs: 4px;
  --dos-space-xs: 8px;
  --dos-space-sm: 12px;
  --dos-space-md: 16px;
  --dos-space-lg: 24px;
  --dos-space-xl: 32px;
  --dos-space-2xl: 48px;
  --dos-space-3xl: 64px;
  --dos-space-4xl: 96px;
  --dos-space-5xl: 128px;

  /* Container & Layout Metrics */
  --dos-container: 1440px;
  --dos-container-max: 1440px;
  --dos-container-narrow: 1080px;
  --dos-container-wide: 1680px;

  /* Container Padding */
  --dos-container-pad: 32px;
  --dos-container-pad-tablet: 24px;
  --dos-container-pad-mobile: 16px;

  /* Section Spacing */
  --dos-section-desktop: 40px;
  --dos-section-tablet: 30px;
  --dos-section-mobile: 25px;

  /* Grid Gaps */
  --dos-grid-gap-desktop: 28px;
  --dos-grid-gap-tablet: 20px;
  --dos-grid-gap-mobile: 12px;

  /* ==========================================================================
     5. MEDIA RATIOS
     ========================================================================== */
  --dos-ratio-product: 4 / 5;
  --dos-ratio-editorial: 3 / 4;
  --dos-ratio-square: 1 / 1;
  --dos-ratio-hero: 16 / 9;
  --dos-product-ratio: var(--dos-ratio-product);
  --dos-hero-ratio: var(--dos-ratio-hero);

  /* ==========================================================================
     6. MOTION, TIMING & EASING
     ========================================================================== */
  --dos-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dos-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dos-ease-snap: cubic-bezier(0.25, 1, 0.5, 1);

  --dos-duration-instant: 100ms;
  --dos-duration-fast: 200ms;
  --dos-duration-base: 350ms;
  --dos-duration-slow: 600ms;

  --dos-transition-fast: var(--dos-duration-fast) var(--dos-ease-out);
  --dos-transition: var(--dos-duration-base) var(--dos-ease-out);
  --dos-transition-base: var(--dos-duration-base) var(--dos-ease-out);
  --dos-transition-slow: var(--dos-duration-slow) var(--dos-ease-out);
  --dos-transition-drawer: 450ms var(--dos-ease-snap);

  /* ==========================================================================
     7. Z-INDEX HIERARCHY
     ========================================================================== */
  --dos-z-negative: -1;
  --dos-z-base: 1;
  --dos-z-elevated: 10;
  --dos-z-badge: 20;
  --dos-z-dropdown: 100;
  --dos-z-sticky: 500;
  --dos-z-backdrop: 800;
  --dos-z-drawer: 900;
  --dos-z-modal: 1000;
  --dos-z-toast: 1100;

  /* ==========================================================================
     8. SHADOWS & ELEVATION (MINIMAL LUXURY SPEC)
     ========================================================================== */
  --dos-shadow-none: none;
  --dos-shadow-subtle: 0 4px 16px rgba(17, 17, 17, 0.05);
  --dos-shadow-elevated: 0 12px 32px rgba(17, 17, 17, 0.08);
  --dos-shadow-drawer: -8px 0 32px rgba(17, 17, 17, 0.15);
}