/**
 * Alenova Design Tokens System
 * Brand: Alenova Luxury Appliances
 * Architectural Design System Foundation
 */

:root {
  /* ========================================================================
     1. Color Palette - Primary Brand & Luxury Neutrals
     ======================================================================== */

  /* Primary Accent: Bespoke Refined Copper */
  --alenova-color-accent: #C58356;
  --alenova-color-accent-hover: #B37145;
  --alenova-color-accent-active: #9E5F36;
  --alenova-color-accent-subtle: rgba(197, 131, 86, 0.12);
  --alenova-color-accent-glow: rgba(197, 131, 86, 0.25);

  /* Warm Pearl / Ivory Backgrounds */
  --alenova-color-bg: #FBF9F6;
  --alenova-color-bg-secondary: #F6F3ED;
  --alenova-color-surface: #FFFFFF;
  --alenova-color-surface-alt: #F4F0E8;
  --alenova-color-surface-subtle: #FAF7F2;

  /* Sophisticated Dark / Charcoal (for Dark Sections & Footers) */
  --alenova-color-dark-bg: #121316;
  --alenova-color-dark-surface: #181A1F;
  --alenova-color-dark-surface-alt: #22252C;
  --alenova-color-dark-border: #2A2D35;

  /* Text & Legibility */
  --alenova-color-text: #141518;
  --alenova-color-text-secondary: #565048;
  --alenova-color-text-muted: #7A7268;
  --alenova-color-text-light: #A89F93;
  --alenova-color-text-inverse: #FFFFFF;
  --alenova-color-text-inverse-muted: #A0A5B1;

  /* Borders & Dividers */
  --alenova-color-border: #E8E2D8;
  --alenova-color-border-light: #F0ECE4;
  --alenova-color-border-dark: #39352F;
  --alenova-color-border-accent: rgba(197, 131, 86, 0.4);

  /* Functional & Feedback */
  --alenova-color-success: #2E6B48;
  --alenova-color-success-bg: #EDF7F1;
  --alenova-color-warning: #B87328;
  --alenova-color-warning-bg: #FDF6EE;
  --alenova-color-error: #B33B3B;
  --alenova-color-error-bg: #FDF2F2;
  --alenova-color-focus: rgba(197, 131, 86, 0.6);

  /* Full Neutral Scale (Warm architectural stone palette) */
  --alenova-neutral-50: #FAF8F5;
  --alenova-neutral-100: #F4F0E8;
  --alenova-neutral-200: #E8E2D8;
  --alenova-neutral-300: #D5CCC0;
  --alenova-neutral-400: #A89F93;
  --alenova-neutral-500: #7A7268;
  --alenova-neutral-600: #565048;
  --alenova-neutral-700: #39352F;
  --alenova-neutral-800: #22201D;
  --alenova-neutral-900: #141518;

  /* ========================================================================
     2. Typography System
     ======================================================================== */

  --alenova-font-display: 'Playfair Display', 'Cormorant Garamond', Georgia, serif;
  --alenova-font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --alenova-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;

  /* Typography Scales */
  --alenova-font-size-display: clamp(2.5rem, 5vw, 4.25rem);
  --alenova-font-size-h1: clamp(2rem, 3.5vw, 2.75rem);
  --alenova-font-size-h2: clamp(1.6rem, 2.5vw, 2.15rem);
  --alenova-font-size-h3: clamp(1.3rem, 1.8vw, 1.65rem);
  --alenova-font-size-h4: 1.25rem;
  --alenova-font-size-body: 1rem;
  --alenova-font-size-small: 0.875rem;
  --alenova-font-size-caption: 0.75rem;
  --alenova-font-size-price: 1.25rem;
  --alenova-font-size-button: 0.875rem;
  --alenova-font-size-navigation: 0.9375rem;

  /* Weights */
  --alenova-font-weight-regular: 400;
  --alenova-font-weight-medium: 500;
  --alenova-font-weight-semibold: 600;
  --alenova-font-weight-bold: 700;

  /* Line Heights */
  --alenova-line-height-tight: 1.15;
  --alenova-line-height-heading: 1.25;
  --alenova-line-height-body: 1.65;
  --alenova-line-height-loose: 1.8;

  /* Letter Spacing */
  --alenova-letter-spacing-tight: -0.02em;
  --alenova-letter-spacing-normal: 0em;
  --alenova-letter-spacing-wide: 0.05em;
  --alenova-letter-spacing-widest: 0.12em;

  /* ========================================================================
     3. Spacing Scale (8-point harmonic grid)
     ======================================================================== */

  --alenova-space-3xs: 4px;
  --alenova-space-2xs: 8px;
  --alenova-space-xs: 12px;
  --alenova-space-sm: 16px;
  --alenova-space-md: 24px;
  --alenova-space-lg: 32px;
  --alenova-space-xl: 48px;
  --alenova-space-2xl: 64px;
  --alenova-space-3xl: 96px;

  /* ========================================================================
     4. Layout & Containers
     ======================================================================== */

  --alenova-container-max: 1440px;
  --alenova-container-main: 1280px;
  --alenova-container-narrow: 840px;
  --alenova-container-padding: clamp(1rem, 4vw, 2.5rem);

  /* Heights */
  --alenova-height-header: 80px;
  --alenova-height-announcement: 36px;
  --alenova-height-control-sm: 36px;
  --alenova-height-control-md: 44px;
  --alenova-height-control-lg: 52px;

  /* ========================================================================
     5. Border Radius (Architectural & Minimal)
     ======================================================================== */

  --alenova-radius-none: 0px;
  --alenova-radius-sm: 2px;
  --alenova-radius-md: 4px;
  --alenova-radius-lg: 8px;
  --alenova-radius-full: 9999px;

  /* ========================================================================
     6. Elevation & Shadows (Atmospheric & Soft)
     ======================================================================== */

  --alenova-shadow-subtle: 0 1px 3px 0 rgba(20, 21, 24, 0.04);
  --alenova-shadow-card: 0 4px 20px -2px rgba(20, 21, 24, 0.05), 0 2px 6px -1px rgba(20, 21, 24, 0.03);
  --alenova-shadow-hover: 0 12px 32px -4px rgba(20, 21, 24, 0.08), 0 4px 12px -2px rgba(20, 21, 24, 0.04);
  --alenova-shadow-drawer: -8px 0 36px 0 rgba(20, 21, 24, 0.14);
  --alenova-shadow-modal: 0 24px 64px -12px rgba(20, 21, 24, 0.22);

  /* ========================================================================
     7. Transitions & Motion
     ======================================================================== */

  --alenova-transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --alenova-transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --alenova-transition-smooth: 400ms cubic-bezier(0.16, 1, 0.3, 1);
  --alenova-transition-bounce: 500ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ========================================================================
     8. Astra Parent Theme CSS Variable Harmonization
     ======================================================================== */

  --ast-global-color-0: var(--alenova-color-accent);
  --ast-global-color-1: var(--alenova-color-accent-hover);
  --ast-global-color-2: var(--alenova-color-text);
  --ast-global-color-3: var(--alenova-color-text-secondary);
  --ast-global-color-4: var(--alenova-color-bg);
  --ast-global-color-5: var(--alenova-color-surface);
  --ast-global-color-6: var(--alenova-color-surface-alt);
  --ast-global-color-7: var(--alenova-color-border-light);
  --ast-global-color-8: var(--alenova-color-dark-bg);
}