/* ==========================================================================
   MIOO — DESIGN SYSTEM TOKENS & VARIABLES
   ========================================================================== */

:root {
  /* Color Palette - Minimalist, Editorial, Luxury Commerce */
  --color-bg-main: #FAFAF9;
  --color-bg-surface: #FFFFFF;
  --color-bg-subtle: #F4F4F2;
  --color-bg-dark: #121316;
  --color-bg-dark-surface: #1A1B1F;

  /* Typography Colors */
  --color-text-primary: #111215;
  --color-text-secondary: #595B62;
  --color-text-muted: #8E9098;
  --color-text-inverse: #FFFFFF;
  --color-text-inverse-muted: #A3A5AD;

  /* Accent & Metallic Bronze / Champán */
  --color-accent: #1C1D21;
  --color-accent-hover: #33363F;
  --color-bronze: #A88B60;
  --color-bronze-light: #C6AF8D;
  --color-bronze-dark: #876D45;
  --color-bronze-bg: rgba(168, 139, 96, 0.08);

  /* Functional & Status Colors */
  --color-success: #1E7E34;
  --color-success-bg: #E8F5E9;
  --color-warning: #B7791F;
  --color-warning-bg: #FEF3C7;
  --color-danger: #C53030;
  --color-danger-bg: #FEE2E2;

  /* Borders & Dividers */
  --border-color-light: #E7E7E4;
  --border-color-medium: #D1D1CD;
  --border-color-dark: #2B2D33;
  --border-radius-xs: 3px;
  --border-radius-sm: 6px;
  --border-radius-md: 10px;
  --border-radius-lg: 16px;
  --border-radius-pill: 9999px;

  /* Shadows */
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.03), 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.06), 0 2px 6px rgba(0, 0, 0, 0.04);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.05);
  --shadow-hover: 0 16px 40px rgba(0, 0, 0, 0.12);
  --shadow-drawer: -8px 0 30px rgba(0, 0, 0, 0.15);

  /* Typography */
  --font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-serif: 'Cinzel', 'Playfair Display', Georgia, serif;
  --font-mono: 'JetBrains Mono', Consolas, monospace;

  /* Spacings */
  --space-xs: 0.25rem;  /* 4px */
  --space-sm: 0.5rem;   /* 8px */
  --space-md: 1rem;     /* 16px */
  --space-lg: 1.5rem;   /* 24px */
  --space-xl: 2rem;     /* 32px */
  --space-2xl: 3rem;    /* 48px */
  --space-3xl: 4.5rem;  /* 72px */
  --space-4xl: 6rem;    /* 96px */

  /* Layout Containers */
  --container-max-width: 1280px;
  --container-narrow-width: 900px;
  --container-padding: 1.5rem;
  --header-height: 80px;
  --announcement-height: 38px;

  /* Transitions */
  --transition-fast: 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-normal: 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-smooth: 0.45s cubic-bezier(0.16, 1, 0.3, 1);

  /* Z-indexes */
  --z-base: 1;
  --z-sticky: 100;
  --z-header: 500;
  --z-backdrop: 900;
  --z-drawer: 1000;
  --z-modal: 1100;
  --z-toast: 1200;
}