/* ==========================================================================
   JOO MEDIA — Design Tokens
   ========================================================================== */
:root {
  /* Brand Colors */
  --color-primary: rgb(24, 41, 51);
  --color-primary-light: rgb(36, 58, 73);
  --color-primary-lighter: rgb(48, 75, 94);
  --color-primary-dark: rgb(14, 25, 32);
  --color-primary-darker: rgb(9, 16, 21);

  --color-secondary: rgb(206, 159, 105);
  --color-secondary-light: rgb(224, 188, 145);
  --color-secondary-dark: rgb(176, 130, 78);

  --color-white: rgb(255, 255, 255);
  --color-white-soft: rgba(255, 255, 255, 0.85);

  /* Gradients */
  --gradient-primary: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  --gradient-secondary: linear-gradient(135deg, var(--color-secondary-light) 0%, var(--color-secondary) 50%, var(--color-secondary-dark) 100%);
  --gradient-dark: linear-gradient(180deg, var(--color-primary-darker) 0%, var(--color-primary) 100%);
  --gradient-hero: radial-gradient(120% 120% at 100% 0%, rgba(206, 159, 105, 0.18) 0%, rgba(24, 41, 51, 0) 55%), linear-gradient(160deg, var(--color-primary-darker) 0%, var(--color-primary) 55%, var(--color-primary-light) 100%);
  --gradient-gold-text: linear-gradient(90deg, var(--color-secondary-light) 0%, var(--color-secondary) 100%);
  --gradient-card: linear-gradient(160deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.01) 100%);

  /* Glass */
  --glass-bg: rgba(255, 255, 255, 0.05);
  --glass-border: rgba(255, 255, 255, 0.12);
  --glass-bg-light: rgba(24, 41, 51, 0.55);

  /* Typography */
  --font-main: "Cairo", sans-serif;

  --fs-hero: clamp(2.75rem, 7vw, 6.5rem);
  --fs-h1: clamp(2.2rem, 4.5vw, 3.6rem);
  --fs-h2: clamp(1.8rem, 3.4vw, 2.75rem);
  --fs-h3: clamp(1.25rem, 2vw, 1.6rem);
  --fs-body-lg: clamp(1.05rem, 1.4vw, 1.25rem);
  --fs-body: clamp(0.95rem, 1.1vw, 1.05rem);
  --fs-small: clamp(0.8rem, 0.9vw, 0.9rem);

  /* Spacing */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.75rem;
  --space-lg: 3rem;
  --space-xl: 5rem;
  --space-2xl: 8rem;

  --section-padding: clamp(4rem, 10vw, 8rem);

  /* Radius */
  --radius-sm: 0.6rem;
  --radius-md: 1.2rem;
  --radius-lg: 2rem;
  --radius-xl: 3rem;
  --radius-full: 999px;

  /* Shadows */
  --shadow-sm: 0 4px 16px rgba(9, 16, 21, 0.25);
  --shadow-md: 0 12px 32px rgba(9, 16, 21, 0.35);
  --shadow-lg: 0 24px 60px rgba(9, 16, 21, 0.45);
  --shadow-gold: 0 12px 32px rgba(206, 159, 105, 0.25);

  /* Transitions */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --t-fast: 0.25s var(--ease);
  --t-med: 0.5s var(--ease);
  --t-slow: 0.8s var(--ease);

  /* Layout */
  --container-max: 1320px;
  --navbar-h: 88px;
}