/* ============================================
   NESTERA PRO — Design Tokens
   Single source of truth for all design values
   DO NOT hardcode values outside this file
   ============================================ */

:root {
  /* --- Colors --- */
  --bg:              #0a0a0a;
  --bg-card:         #161616;
  --bg-section-alt:  #111111;
  --border:          #2a2a2a;
  --accent:          #C0152A;
  --accent-hover:    #FF2D3D;
  --accent-muted:    rgba(192, 21, 42, 0.15);
  --text-primary:    #F5F0EB;
  --text-secondary:  #A89E97;
  --text-disabled:   #5a5a5a;
  --overlay:         rgba(10, 10, 10, 0.7);

  /* --- Typography — English --- */
  --font-display-en: 'Bebas Neue', sans-serif;
  --font-body-en:    'DM Sans', sans-serif;

  /* --- Typography — Arabic --- */
  --font-display-ar: 'Tajawal', sans-serif;
  --font-body-ar:    'Tajawal', sans-serif;

  /* --- Font Weights --- */
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-bold:    700;
  --fw-black:   900;

  /* --- Font Sizes --- */
  --fs-hero: clamp(48px, 8vw, 96px);
  --fs-h2:   clamp(32px, 5vw, 56px);
  --fs-h3:   clamp(20px, 3vw, 28px);
  --fs-body: clamp(15px, 1.5vw, 17px);
  --fs-small: 13px;
  --fs-label: 11px;

  /* --- Spacing --- */
  --section-pad-desktop: 120px;
  --section-pad-mobile:  60px;
  --card-pad:            28px;
  --container-max:       1200px;
  --container-pad:       24px;
  --gap-cards:           20px;

  /* --- Borders & Radius --- */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-pill: 999px;

  /* --- Shadows --- */
  --shadow-card:   0 4px 24px rgba(0,0,0,0.4);
  --shadow-accent: 0 0 24px rgba(192, 21, 42, 0.3);

  /* --- Animations --- */
  --ease:          cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 0.3s;
  --duration:      0.6s;
  --duration-slow: 1s;

  /* --- Z-index --- */
  --z-nav:     100;
  --z-overlay: 50;
  --z-modal:   200;
}

/* Mobile overrides */
@media (max-width: 768px) {
  :root {
    --section-pad-desktop: var(--section-pad-mobile);
    --card-pad: 20px;
    --gap-cards: 16px;
  }
}