/**
 * REFINED_MOVEMENT - Design Tokens & CSS Variables
 * Based on Brand Guidelines - Option A: Warm Minimalist
 * Last updated: November 2025
 */

:root {
  /* ========================================
     COLOR PALETTE
     ======================================== */

  /* Warm Neutrals (Primary) */
  --color-alabaster: #F5F3ED;
  --color-linen: #E8E4D8;
  --color-sand: #D4CCBA;

  /* Black & Charcoal (Text & Logo) */
  --color-charcoal: #1A1D23;
  --color-graphite: #3D3D3D;

  /* Warm Metallics (Accent) */
  --color-gold: #B4975A;
  --color-rattan: #C9A876;

  /* Utility */
  --color-white: #FFFFFF;

  /* ========================================
     SEMANTIC COLOR ASSIGNMENTS
     ======================================== */

  --bg-primary: var(--color-alabaster);
  --bg-secondary: var(--color-linen);
  --bg-dark: var(--color-charcoal);

  --text-primary: var(--color-charcoal);
  --text-secondary: var(--color-graphite);
  --text-on-dark: var(--color-alabaster);

  --accent-primary: var(--color-gold);
  --accent-secondary: var(--color-rattan);

  --border-color: var(--color-sand);

  /* ========================================
     TYPOGRAPHY
     ======================================== */

  /* Font Families */
  --font-display: 'Barlow Condensed', sans-serif;
  --font-heading: 'Barlow Condensed', sans-serif; /* Alias for --font-display */
  --font-body: 'Roboto', sans-serif;
  --font-location: 'Roboto Condensed', sans-serif;

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

  /* Font Sizes - Fluid REM-based with clamp() */
  /* Hero H1: 36px (mobile) → 72px (desktop) */
  --font-size-h1: clamp(2.25rem, 3vw + 1.5rem, 4.5rem);

  /* Section Headers H2: 32px (mobile) → 48px (desktop) */
  --font-size-h2: clamp(2rem, 2vw + 1rem, 3rem);

  /* Subsection H3: 22px (mobile) → 36px (desktop) */
  --font-size-h3: clamp(1.375rem, 1.5vw + 0.75rem, 2.25rem);

  /* Smaller Headers H4: 18px (mobile) → 28px (desktop) */
  --font-size-h4: clamp(1.125rem, 1vw + 0.5rem, 1.75rem);

  /* Body Text - Fixed sizes (accessibility) */
  --font-size-body-large: 1.125rem;   /* 18px */
  --font-size-body: 1.0625rem;        /* 17px */
  --font-size-medium: 0.9375rem;      /* 15px - content between small and body */
  --font-size-small: 0.875rem;        /* 14px */
  --font-size-tiny: 0.75rem;          /* 12px */

  /* Line Heights */
  --line-height-tight: 1.1;
  --line-height-heading: 1.2;
  --line-height-body: 1.6;
  --line-height-comfortable: 1.7;     /* Between body and relaxed */
  --line-height-relaxed: 1.8;

  /* ========================================
     SPACING SYSTEM (8px base)
     ======================================== */

  --space-xs: 8px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 32px;
  --space-xl: 48px;
  --space-xxl: 64px;
  --space-xxxl: 96px;

  /* ========================================
     LAYOUT
     ======================================== */

  --container-max-width: 1440px;
  --container-padding: 40px;
  --header-height: 80px;

  /* ========================================
     BORDER RADIUS
     ======================================== */

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;

  /* ========================================
     SHADOWS
     ======================================== */

  --shadow-sm: 0 2px 8px rgba(26, 29, 35, 0.06);
  --shadow-md: 0 4px 12px rgba(26, 29, 35, 0.08);
  --shadow-lg: 0 6px 16px rgba(26, 29, 35, 0.10);
  --shadow-xl: 0 8px 24px rgba(26, 29, 35, 0.12);

  /* ========================================
     TRANSITIONS
     ======================================== */

  --transition-fast: 0.2s ease;
  --transition-base: 0.3s ease;
  --transition-slow: 0.5s ease;

  /* ========================================
     Z-INDEX LAYERS
     ======================================== */

  --z-base: 1;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-overlay: 300;
  --z-modal: 400;
  --z-toast: 500;
}

/* ========================================
   RESPONSIVE OVERRIDES
   Note: Typography uses fluid clamp() - no overrides needed
   ======================================== */

@media (max-width: 1023px) {
  :root {
    --container-padding: 32px;
    --header-height: 70px;
  }
}

@media (max-width: 767px) {
  :root {
    --font-size-body: 1rem;     /* 16px on mobile for readability */
    --container-padding: 20px;
    --header-height: 60px;
    --space-xl: 32px;
    --space-xxl: 48px;
  }
}