/* ==========================================================================
   FEMME MEDIALE — DESIGN TOKENS & SYSTEM VARIABLES
   Phase 1: Global Visual System
   ========================================================================== */

:root {
  /* Major Section Background Tokens */
  --fm-bg-white: #FFFBFC;           /* Brand White for major sections */
  --fm-bg-blush: #FAF2F5;           /* Brand Blush for major sections */

  /* Brand Core Colors */
  --color-bg-primary: #FFFBFC;      /* Primary light background (Brand off-white) */
  --color-surface-white: #FFFFFF;   /* High-contrast pure white for elevated cards */
  --color-surface-tinted: #FAF2F5;  /* Soft editorial tinted surface / blush background */
  --color-bg-blush: #FAF2F5;        /* Standardized brand blush section background */
  --color-text-primary: #524724;    /* Dark neutral: body copy, navigation, supporting text, labels, secondary UI text. NEVER for headlines! */
  --color-text-secondary: rgba(82, 71, 36, 0.76); /* Secondary body text */
  --color-text-muted: rgba(82, 71, 36, 0.54);     /* Muted metadata, captions */
  
  /* Headline Color System (Headlines use ONLY Magenta #D13282 and Purple #8E41B4) */
  --color-headline-magenta: #D13282;  /* Primary bold accent headline color */
  --color-headline-purple: #8E41B4;   /* Strategic editorial purple headline color */
  --color-headline-default: #D13282;  /* Default headline color fallback */

  /* Accent Colors (Used intentionally, never overused) */
  --color-accent-magenta: #D13282;  /* Brand Magenta */
  --color-accent-magenta-hover: #B8256E;
  --color-accent-magenta-subtle: rgba(209, 50, 130, 0.08);
  --color-accent-magenta-glow: rgba(209, 50, 130, 0.18);

  --color-accent-purple: #8E41B4;   /* Brand Purple */
  --color-accent-purple-hover: #7A339E;
  --color-accent-purple-subtle: rgba(142, 65, 180, 0.08);

  /* Structural Dividers & Borders */
  --color-border-subtle: rgba(82, 71, 36, 0.12);
  --color-border-strong: rgba(82, 71, 36, 0.24);
  --color-border-focus: #D13282;

  /* Typography Families */
  --font-display: 'The Seasons', 'Playfair Display', 'Bodoni Moda', 'Cormorant Garamond', Georgia, serif;
  --font-body: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, 'SFMono-Regular', Menlo, Monaco, Consolas, monospace;

  /* Fluid Typography Scale (using clamp for flawless responsiveness) */
  --font-size-xs: clamp(0.75rem, 0.7rem + 0.2vw, 0.8125rem);    /* 12-13px */
  --font-size-sm: clamp(0.8438rem, 0.8rem + 0.25vw, 0.9375rem); /* 13.5-15px */
  --font-size-base: clamp(0.9688rem, 0.92rem + 0.3vw, 1.0625rem); /* 15.5-17px */
  --font-size-md: clamp(1.125rem, 1.05rem + 0.4vw, 1.25rem);    /* 18-20px */
  --font-size-lg: clamp(1.2813rem, 1.18rem + 0.55vw, 1.5rem);   /* 20.5-24px */
  --font-size-xl: clamp(1.5625rem, 1.38rem + 0.9vw, 1.875rem);   /* 25-30px */
  --font-size-2xl: clamp(1.9375rem, 1.65rem + 1.4vw, 2.5rem);    /* 31-40px */
  --font-size-3xl: clamp(2.375rem, 1.95rem + 2.1vw, 3.25rem);    /* 38-52px */
  --font-size-hero: clamp(2.75rem, 2.1rem + 3.2vw, 4.5rem);      /* 44-72px */

  /* Line Heights */
  --line-height-tight: 1.12;
  --line-height-snug: 1.25;
  --line-height-normal: 1.6;
  --line-height-relaxed: 1.72;

  /* Letter Spacings */
  --letter-spacing-tight: -0.025em;
  --letter-spacing-normal: 0em;
  --letter-spacing-wide: 0.05em;
  --letter-spacing-caps: 0.12em;

  /* Spacing Scale */
  --space-2: 0.125rem;   /* 2px */
  --space-4: 0.25rem;    /* 4px */
  --space-8: 0.5rem;     /* 8px */
  --space-12: 0.75rem;   /* 12px */
  --space-16: 1rem;      /* 16px */
  --space-20: 1.25rem;   /* 20px */
  --space-24: 1.5rem;    /* 24px */
  --space-32: 2rem;      /* 32px */
  --space-40: 2.5rem;    /* 40px */
  --space-48: 3rem;      /* 48px */
  --space-64: 4rem;      /* 64px */
  --space-80: 5rem;      /* 80px */
  --space-96: 6rem;      /* 96px */
  --space-128: 8rem;     /* 128px */

  /* Layout Containers */
  --container-max-width: 1240px;
  --container-narrow-width: 980px;
  --container-editorial-width: 820px;
  --container-padding: clamp(1.25rem, 4vw, 3.5rem);

  /* Border Radii (Refined, never exaggerated or childish) */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-pill: 9999px;

  /* Controlled Shadows (Soft, warm, layered depth) */
  --shadow-subtle: 0 2px 10px -1px rgba(82, 71, 36, 0.05);
  --shadow-card: 0 4px 18px -2px rgba(82, 71, 36, 0.07), 0 10px 24px -4px rgba(82, 71, 36, 0.06);
  --shadow-elevated: 0 6px 20px -2px rgba(82, 71, 36, 0.08), 0 18px 42px -6px rgba(82, 71, 36, 0.11);
  --shadow-hover: 0 8px 24px -2px rgba(82, 71, 36, 0.08), 0 20px 42px -6px rgba(82, 71, 36, 0.12);
  --shadow-magenta-subtle: 0 8px 24px -4px rgba(209, 50, 130, 0.24);

  /* Animation Easings & Timings (Refined, premium, non-bouncy) */
  --ease-editorial: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-smooth: cubic-bezier(0.25, 0.8, 0.25, 1);
  --duration-fast: 160ms;
  --duration-normal: 260ms;
  --duration-medium: 400ms;
  --duration-slow: 650ms;

  /* Layering Z-index */
  --z-base: 1;
  --z-card-overlap: 5;
  --z-dropdown: 50;
  --z-header: 100;
  --z-drawer: 200;
  --z-toast: 300;
}