/* =============================================
   HERYERPARKOUR — Design Tokens
   ============================================= */

:root {
  /* ===== BACKGROUNDS ===== */
  --bg-primary: #f2efe9;
  --bg-secondary: #e8e4dc;
  --bg-dark: #0f0f0f;
  --bg-dark-2: #141418;
  --bg-wall: #2a2520;

  /* ===== TEXT ===== */
  --text-primary: #111111;
  --text-secondary: #555555;
  --text-muted: #888888;
  --text-on-dark: #ffffff;
  --text-on-dark-dim: rgba(255, 255, 255, 0.7);
  --text-on-dark-muted: rgba(255, 255, 255, 0.5);
  --text-on-dark-faint: rgba(255, 255, 255, 0.3);

  /* ===== BRAND ===== */
  --accent: #ff4d00;
  --accent-hover: #ff6b2b;
  --accent-glow: rgba(255, 77, 0, 0.15);
  --accent-border: rgba(255, 77, 0, 0.3);

  /* ===== ACCENT PALETTE ===== */
  --yellow: #f5e642;
  --lime: #c6f526;
  --cyan: #00e5ff;
  --pink: #ff2d7b;
  --blue: #2d5bff;
  --purple: #a855f7;
  --green: #22c55e;
  --white: #ffffff;
  --whatsapp: #25d366;

  /* ===== TYPOGRAPHY — Fluid Scale ===== */
  --font-display: clamp(48px, 8vw, 120px);
  --font-h1: clamp(40px, 6vw, 90px);
  --font-h2: clamp(28px, 4.5vw, 64px);
  --font-h3: clamp(18px, 2.2vw, 28px);
  --font-body: clamp(15px, 1vw + 0.25rem, 18px);
  --font-body-lg: clamp(16px, 1.1vw + 0.25rem, 20px);
  --font-small: clamp(13px, 0.85vw + 0.2rem, 15px);
  --font-caption: clamp(11px, 0.7vw + 0.15rem, 13px);
  --font-label: clamp(12px, 0.75vw + 0.15rem, 14px);

  /* ===== FONT FAMILIES ===== */
  --ff-display: 'Anton', sans-serif;
  --ff-heading: 'Barlow Condensed', sans-serif;
  --ff-body: 'Barlow', sans-serif;
  --ff-handwrite: 'Permanent Marker', cursive;

  /* ===== SPACING SCALE — Fluid ===== */
  --space-2xs: 4px;
  --space-xs: clamp(6px, 0.5vw, 8px);
  --space-sm: clamp(8px, 0.8vw, 12px);
  --space-md: clamp(12px, 1vw, 16px);
  --space-lg: clamp(16px, 1.5vw, 24px);
  --space-xl: clamp(20px, 2vw, 32px);
  --space-2xl: clamp(28px, 3vw, 48px);
  --space-3xl: clamp(36px, 4vw, 64px);
  --space-4xl: clamp(48px, 5.5vw, 96px);
  --space-section: clamp(60px, 7vw, 160px);

  /* ===== SHADOWS ===== */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-md: 4px 6px 20px rgba(0, 0, 0, 0.12);
  --shadow-lg: 8px 12px 40px rgba(0, 0, 0, 0.18);
  --shadow-accent: 8px 8px 0 var(--accent);
  --shadow-polaroid: 3px 5px 16px rgba(0, 0, 0, 0.45), 1px 2px 6px rgba(0, 0, 0, 0.2);

  /* ===== TRANSITIONS ===== */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast: 0.2s;
  --duration-normal: 0.3s;
  --duration-slow: 0.5s;
  --duration-slower: 0.8s;

  /* ===== LAYOUT — Fluid ===== */
  --container-max: 1280px;
  --container-padding: clamp(16px, 2.5vw, 48px);
  --nav-height: clamp(56px, 4vw, 72px);
  --nav-height-scrolled: clamp(48px, 3vw, 56px);

  /* ===== BORDERS ===== */
  --border-light: 1px solid rgba(255, 255, 255, 0.08);
  --border-light-hover: 1px solid rgba(255, 255, 255, 0.15);
  --border-dark: 1px solid rgba(0, 0, 0, 0.06);

  /* ===== CLIP-PATHS (Asimetrik Street) ===== */
  --clip-btn: polygon(3% 0, 100% 0, 97% 100%, 0 100%);
  --clip-card: polygon(0 0, 100% 2%, 97% 100%, 3% 97%);
  --clip-card-1: polygon(0 0, 100% 2%, 97% 100%, 3% 97%);
  --clip-card-2: polygon(2% 0, 100% 0, 98% 98%, 0 100%);
  --clip-card-3: polygon(0 3%, 97% 0, 100% 97%, 3% 100%);
  --clip-card-4: polygon(3% 0, 100% 2%, 97% 100%, 0 98%);
  --clip-card-5: polygon(0 0, 98% 3%, 100% 97%, 2% 100%);
  --clip-card-6: polygon(2% 2%, 100% 0, 97% 100%, 0 97%);

  /* ===== Z-INDEX SCALE ===== */
  --z-base: 1;
  --z-card: 2;
  --z-sticky: 10;
  --z-fab: 900;
  --z-nav: 1000;
  --z-modal: 2000;
  --z-grain: 10000;
}

/* ===== DARK THEME ===== */
[data-theme="dark"] {
  --bg-primary: #0f0f0f;
  --bg-secondary: #1a1a1a;
  --text-primary: #f0f0f0;
  --text-secondary: #aaaaaa;
  --text-muted: #666666;
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-md: 4px 6px 20px rgba(0, 0, 0, 0.4);
}