/**
 * ALI YILDIZ — HAIR & BEAUTY CARE
 * Design Tokens & Brand System
 * 
 * Strict Brand Palette:
 * - #F5923E : Primary warm orange / hero identity color
 * - #F5E5CC : Primary cream / typography / contrast color
 * - #633120 : Deep brown / luxury dark tone
 * - #C87C4C : Muted terracotta / secondary accent
 */

:root {
  /* ==========================================================================
     Strict Brand Palette
     ========================================================================== */
  --color-orange: #F5923E;
  --color-cream: #F5E5CC;
  --color-brown: #633120;
  --color-terracotta: #C87C4C;

  /* Color Variations & Alpha Overlays (Strictly derived from the 4 colors) */
  --color-cream-90: rgba(245, 229, 204, 0.90);
  --color-cream-70: rgba(245, 229, 204, 0.70);
  --color-cream-50: rgba(245, 229, 204, 0.50);
  --color-cream-25: rgba(245, 229, 204, 0.25);
  --color-cream-12: rgba(245, 229, 204, 0.12);
  --color-cream-06: rgba(245, 229, 204, 0.06);

  --color-brown-95: rgba(99, 49, 32, 0.95);
  --color-brown-85: rgba(99, 49, 32, 0.85);
  --color-brown-60: rgba(99, 49, 32, 0.60);
  --color-brown-30: rgba(99, 49, 32, 0.30);
  --color-brown-15: rgba(99, 49, 32, 0.15);
  --color-brown-08: rgba(99, 49, 32, 0.08);

  --color-orange-90: rgba(245, 146, 62, 0.90);
  --color-orange-20: rgba(245, 146, 62, 0.20);
  --color-orange-10: rgba(245, 146, 62, 0.10);

  --color-terracotta-80: rgba(200, 124, 76, 0.80);
  --color-terracotta-40: rgba(200, 124, 76, 0.40);
  --color-terracotta-20: rgba(200, 124, 76, 0.20);

  /* Semantic Theme Aliases */
  --bg-primary: #633120;
  --bg-secondary: #522718;
  --bg-surface: #421E12;
  --bg-cream: #F5E5CC;
  --bg-orange: #F5923E;

  --text-primary: #F5E5CC;
  --text-secondary: rgba(245, 229, 204, 0.78);
  --text-muted: rgba(245, 229, 204, 0.55);
  --text-accent: #F5923E;
  --text-dark: #633120;
  --text-dark-muted: rgba(99, 49, 32, 0.70);

  --border-subtle: rgba(245, 229, 204, 0.15);
  --border-medium: rgba(245, 229, 204, 0.28);
  --border-strong: rgba(245, 229, 204, 0.50);
  --border-terracotta: rgba(200, 124, 76, 0.35);
  --border-dark: rgba(99, 49, 32, 0.20);

  /* ==========================================================================
     Typography
     ========================================================================== */
  --font-display: 'Marcellus', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Fluid Editorial Type Scale */
  --text-2xs: clamp(0.68rem, 0.65rem + 0.15vw, 0.75rem);
  --text-xs: clamp(0.78rem, 0.74rem + 0.2vw, 0.85rem);
  --text-sm: clamp(0.88rem, 0.84rem + 0.25vw, 0.98rem);
  --text-base: clamp(1.00rem, 0.95rem + 0.3vw, 1.12rem);
  --text-lg: clamp(1.15rem, 1.05rem + 0.5vw, 1.35rem);
  --text-xl: clamp(1.40rem, 1.25rem + 0.8vw, 1.75rem);
  --text-2xl: clamp(1.75rem, 1.50rem + 1.2vw, 2.35rem);
  --text-3xl: clamp(2.25rem, 1.90rem + 1.8vw, 3.25rem);
  --text-4xl: clamp(2.90rem, 2.40rem + 2.8vw, 4.50rem);
  --text-5xl: clamp(3.60rem, 2.90rem + 4.2vw, 6.20rem);
  --text-hero: clamp(4.40rem, 3.50rem + 6.0vw, 8.80rem);

  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;

  --tracking-tighter: -0.03em;
  --tracking-tight: -0.015em;
  --tracking-normal: 0em;
  --tracking-wide: 0.08em;
  --tracking-wider: 0.16em;
  --tracking-widest: 0.28em;
  --tracking-editorial: 0.38em;

  /* ==========================================================================
     Layout & Spacing
     ========================================================================== */
  --container-max: 1480px;
  --container-editorial: 1240px;
  --container-narrow: 980px;
  --container-pad: clamp(1.5rem, 4.5vw, 4.5rem);
  --container-pad-sm: clamp(1.0rem, 2.5vw, 2.0rem);

  --header-height: 96px;
  --header-height-scrolled: 80px;

  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 1.0rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4.0rem;
  --space-2xl: 6.5rem;
  --space-3xl: 9.5rem;
  --space-section: clamp(3.75rem, 6.5vw, 7rem);

  /* ==========================================================================
     Transitions & Motion
     ========================================================================== */
  --ease-cinematic: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);

  --duration-fast: 240ms;
  --duration-normal: 420ms;
  --duration-slow: 750ms;
  --duration-cinematic: 1200ms;

  /* Placeholder Wireframe Guides */
  --ph-bg: rgba(99, 49, 32, 0.65);
  --ph-border: rgba(245, 229, 204, 0.20);
  --ph-badge-bg: rgba(245, 229, 204, 0.08);
  --ph-accent: #F5923E;
}