/* =============================================================================
   TOKENS.CSS — Al Itqan Decor V2
   All CSS custom properties. Source: 02-brand/design-system.md
   Never edit values here without updating the brief.
============================================================================= */

:root {
  /* ── Color Palette ─────────────────────────────────────── */
  --color-charcoal:        #1A1A1A;
  --color-charcoal-soft:   #2B2B2B;
  --color-bone:            #FAFAF7;
  --color-bone-warm:       #F5F2EC;

  --color-terracotta:      #B8956A;
  --color-terracotta-deep: #9C7E5A;
  --color-terracotta-soft: #D4B896;

  --color-stone:           #A8A39C;
  --color-stone-light:     #C7C3BC;
  --color-stone-dark:      #6B6862;

  --color-whatsapp:        #25D366;
  --color-whatsapp-hover:  #1EBE5A;

  /* ── Semantic Aliases ──────────────────────────────────── */
  --text-primary:    var(--color-charcoal);
  --text-secondary:  var(--color-stone-dark);
  --text-muted:      var(--color-stone-dark);
  --text-on-dark:    var(--color-bone);
  --bg-primary:      var(--color-bone);
  --bg-secondary:    var(--color-bone-warm);
  --bg-dark:         var(--color-charcoal);

  /* ── Typography ────────────────────────────────────────── */
  --font-display:  'Tajawal', 'Inter', system-ui, sans-serif;
  --font-body-ar:  'IBM Plex Sans Arabic', 'Tajawal', sans-serif;
  --font-body-en:  'Inter', system-ui, sans-serif;

  /* ── Type Scale (Mobile) ───────────────────────────────── */
  --text-xs:   0.75rem;   /* 12px */
  --text-sm:   0.875rem;  /* 14px */
  --text-base: 1rem;      /* 16px */
  --text-lg:   1.125rem;  /* 18px */
  --text-xl:   1.375rem;  /* 22px */
  --text-2xl:  1.75rem;   /* 28px */
  --text-3xl:  2.25rem;   /* 36px */
  --text-4xl:  2.75rem;   /* 44px */
  --text-5xl:  3.5rem;    /* 56px */

  /* ── Leading ───────────────────────────────────────────── */
  --leading-tight:   1.2;
  --leading-snug:    1.4;
  --leading-normal:  1.6;
  --leading-relaxed: 1.8;

  /* ── Spacing Scale ─────────────────────────────────────── */
  --sp-1:  0.25rem;  /* 4px  */
  --sp-2:  0.5rem;   /* 8px  */
  --sp-3:  0.75rem;  /* 12px */
  --sp-4:  1rem;     /* 16px */
  --sp-5:  1.5rem;   /* 24px */
  --sp-6:  2rem;     /* 32px */
  --sp-7:  3rem;     /* 48px */
  --sp-8:  4rem;     /* 64px */
  --sp-9:  5rem;     /* 80px */
  --sp-10: 7rem;     /* 112px */
  --sp-11: 9rem;     /* 144px */

  /* ── Layout ────────────────────────────────────────────── */
  --container-max:    1200px;
  --content-width-en: 65ch;
  --content-width-ar: 55ch;

  /* ── Radius ────────────────────────────────────────────── */
  --r-sm:   6px;
  --r-md:   8px;
  --r-lg:   12px;
  --r-xl:   16px;
  --r-full: 9999px;

  /* ── Shadows ───────────────────────────────────────────── */
  --shadow-sm:    0 1px 2px  rgba(26,26,26,0.04);
  --shadow-md:    0 4px 12px rgba(26,26,26,0.06);
  --shadow-lg:    0 12px 32px rgba(26,26,26,0.10);
  --shadow-xl:    0 24px 48px rgba(26,26,26,0.12);
  --shadow-float: 0 8px 24px rgba(37,211,102,0.30);

  /* ── Transitions ───────────────────────────────────────── */
  --ease-out: cubic-bezier(0.25, 0, 0, 1);
  --duration-fast:   150ms;
  --duration-base:   200ms;
  --duration-slow:   300ms;
}

/* Desktop type scale upgrades */
@media (min-width: 768px) {
  :root {
    --text-2xl: 2rem;    /* 32px */
    --text-3xl: 2.75rem; /* 44px */
    --text-4xl: 3.5rem;  /* 56px */
    --text-5xl: 4.5rem;  /* 72px */
  }
}