/* ==========================================================================
   شام التميز للدعاية والإعلان — Design Tokens
   Color system derived from the brand logo (burnt-orange "H" + brand-blue "S").
   All text/CTA pairings below are WCAG-validated (see values in comments).
   ========================================================================== */

:root {
  /* --- Brand core ------------------------------------------------------- */
  --color-primary: #d9500f;        /* brand orange (logo H)                 */
  --color-primary-600: #c0450c;    /* button/link on white — 5.12:1 AA      */
  --color-primary-700: #9a3809;    /* hover/active                          */
  --color-primary-050: #fdeee6;    /* tint bg                               */
  --color-primary-100: #fad9c8;    /* soft tint                             */

  --color-secondary: #2e80c2;      /* brand blue (logo S)                   */
  --color-secondary-600: #256aa3;  /* link on white — 5.72:1 AA             */
  --color-secondary-700: #1e5a8a;  /* strong text — 7.28:1 AAA              */
  --color-secondary-050: #eaf3fb;  /* tint bg                               */
  --color-secondary-100: #cfe4f5;  /* soft tint                             */

  --color-accent: #f2a03d;         /* warm amber highlight (derived)        */

  /* --- Neutrals / surfaces --------------------------------------------- */
  --color-bg: #fbf9f7;             /* warm off-white page bg                */
  --color-surface: #ffffff;        /* cards, header                         */
  --color-surface-2: #f4efe9;      /* alt section bg                        */
  --color-text: #1b2a3a;           /* body — 14.59:1 on white               */
  --color-heading: #14202d;        /* headings                              */
  --color-muted: #5b6b7b;          /* secondary text — 5.48:1 AA            */
  --color-border: #e7ded4;         /* hairlines                             */
  --color-border-strong: #d3c7b8;

  /* --- Semantic states -------------------------------------------------- */
  --color-success: #1f8a4c;
  --color-warning: #c9820a;
  --color-error: #c0392b;
  --color-whatsapp: #25d366;
  --color-whatsapp-600: #1da851;

  /* --- Dark surfaces (footer/hero overlays) ---------------------------- */
  --color-ink: #14202d;
  --color-ink-2: #1f3040;
  --color-on-ink: #f4f7fa;
  --color-on-ink-muted: #a9bccb;

  /* --- Typography ------------------------------------------------------- */
  --font-sans: "Tajawal", "Segoe UI", Tahoma, Arial, sans-serif;
  --font-head: "Cairo", "Tajawal", "Segoe UI", Tahoma, sans-serif;

  /* Fluid type scale (clamp: min, preferred, max) */
  --fs-300: clamp(0.8rem, 0.77rem + 0.15vw, 0.875rem);
  --fs-400: clamp(0.95rem, 0.9rem + 0.25vw, 1.05rem);   /* body */
  --fs-500: clamp(1.1rem, 1rem + 0.5vw, 1.3rem);
  --fs-600: clamp(1.3rem, 1.1rem + 0.9vw, 1.7rem);
  --fs-700: clamp(1.7rem, 1.3rem + 1.7vw, 2.4rem);
  --fs-800: clamp(2.1rem, 1.5rem + 2.8vw, 3.4rem);      /* hero */
  --fs-900: clamp(2.6rem, 1.7rem + 4vw, 4.4rem);

  --lh-tight: 1.2;
  --lh-snug: 1.4;
  --lh-body: 1.75;

  /* --- Spacing scale ---------------------------------------------------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;

  --container: 1200px;
  --container-narrow: 780px;

  /* --- Radii / shadow / motion ----------------------------------------- */
  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(20, 32, 45, 0.06), 0 2px 6px rgba(20, 32, 45, 0.05);
  --shadow: 0 6px 20px rgba(20, 32, 45, 0.08), 0 2px 6px rgba(20, 32, 45, 0.05);
  --shadow-lg: 0 18px 48px rgba(20, 32, 45, 0.14);
  --shadow-primary: 0 10px 26px rgba(217, 80, 15, 0.30);

  --ring: 0 0 0 3px rgba(46, 128, 194, 0.35);

  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dur: 0.25s;

  --header-h: 76px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}