/* ==========================================================================
   DESIGN TOKENS
   --------------------------------------------------------------------------
   The whole look of the site is controlled from this file: colours, fonts,
   type scale, spacing, radii, shadows, motion, layering and layout sizes.
   Change a value here and every page updates.

   Contents
     1. Colour palette
     2. Typography
     3. Spacing scale
     4. Layout
     5. Radii
     6. Shadows
     7. Motion
     8. Z-index layers
     9. Breakpoints (reference)
    10. Direction helper (RTL)
   ========================================================================== */

:root {
  /* ------------------------------------------------------------------------
     1. Colour palette
     ------------------------------------------------------------------------ */

  /* Surfaces: white pages, soft grey panels, near-black feature bands */
  --color-white: #ffffff;
  --color-bg: #ffffff;                 /* Page background */
  --color-bg-alt: #f5f5f5;             /* Grey sections and card surfaces */
  --color-bg-muted: #ebebeb;           /* Image stages, skeletons */
  --color-border: #e6e6e6;             /* Hairlines, card borders */
  --color-border-strong: #d4d4d4;      /* Inputs, outlined buttons */

  /* Text */
  --color-text: #161618;               /* Headings & body */
  --color-text-muted: #5c5c5a;         /* Secondary text (AA on white & #f5f5f5) */
  --color-text-soft: #9a9a97;          /* Second tone in headlines (large text only) */

  /* Brand: monochrome ink */
  --color-primary: #161618;            /* Buttons, links, active states */
  --color-primary-hover: #000000;
  --color-primary-soft: #ececec;       /* Tinted backgrounds (icon tiles) */
  --color-primary-tint: #f5f5f5;

  /* Accent: kept as tokens so older class names keep working, now neutral */
  --color-gold: #161618;               /* Decorative: stars, lines, icons */
  --color-gold-hover: #000000;
  --color-gold-dark: #161618;          /* Accent text on light backgrounds */
  --color-gold-soft: #f0f0f0;
  --color-gold-light: #ffffff;         /* Accent text on dark backgrounds */

  /* Dark surfaces (hero, stats, testimonials, footer) */
  --color-dark: #161618;
  --color-dark-deep: #0f0f10;
  --color-dark-raised: #1f1f22;        /* Cards on dark */
  --color-on-dark: #ffffff;
  --color-on-dark-muted: rgba(255, 255, 255, 0.66);
  --color-on-dark-border: rgba(255, 255, 255, 0.1);

  /* Feedback */
  --color-success: #1f7a4d;
  --color-success-soft: #e7f4ec;
  --color-error: #b42318;
  --color-error-soft: #fdecea;
  --color-info: var(--color-primary);

  /* Third-party */
  --color-whatsapp: #1a9e4b;           /* Slightly deeper than brand green for contrast */
  --color-whatsapp-hover: #15803d;

  /* States */
  --color-focus: #161618;
  --color-focus-on-dark: #ffffff;
  --color-overlay: rgba(10, 10, 12, 0.55);

  /* ------------------------------------------------------------------------
     2. Typography
     Geist for headings (tight, confident), Inter for body copy.
     ------------------------------------------------------------------------ */
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-heading: "Geist", var(--font-sans);
  --font-display: var(--font-heading);  /* Headlines & section titles */
  --font-logo: var(--font-heading);

  /* Fluid type scale (mobile → desktop) */
  --fs-2xs: 0.6875rem;                                  /* 11px */
  --fs-xs: 0.75rem;                                     /* 12px */
  --fs-sm: 0.875rem;                                    /* 14px */
  --fs-base: 1rem;                                      /* 16px */
  --fs-md: 1.0625rem;                                   /* 17px */
  --fs-lg: 1.25rem;                                     /* 20px */
  --fs-xl: clamp(1.375rem, 1.2rem + 0.6vw, 1.625rem);   /* 22 → 26px */
  --fs-2xl: clamp(2rem, 1.45rem + 2vw, 3rem);           /* 32 → 48px: section titles */
  --fs-3xl: clamp(2.25rem, 1.5rem + 2.8vw, 3.75rem);    /* 36 → 60px: page titles */
  --fs-display: clamp(2.5rem, 1.6rem + 3.4vw, 4.25rem); /* 40 → 68px: hero headline */
  --fs-mega: clamp(4.5rem, 0.5rem + 15.5vw, 17rem);     /* Giant hero / footer wordmark */

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;

  --lh-tight: 1.1;
  --lh-snug: 1.3;
  --lh-base: 1.6;

  --ls-tight: -0.035em;
  --ls-caps: 0.12em;
  --ls-wide-caps: 0.32em;

  /* ------------------------------------------------------------------------
     3. Spacing scale (4px base)
     ------------------------------------------------------------------------ */
  --space-1: 0.25rem;   /*  4px */
  --space-2: 0.5rem;    /*  8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-5: 1.25rem;   /* 20px */
  --space-6: 1.5rem;    /* 24px */
  --space-8: 2rem;      /* 32px */
  --space-10: 2.5rem;   /* 40px */
  --space-12: 3rem;     /* 48px */
  --space-16: 4rem;     /* 64px */
  --space-20: 5rem;     /* 80px */
  --space-24: 6rem;     /* 96px */

  /* ------------------------------------------------------------------------
     4. Layout
     ------------------------------------------------------------------------ */
  --container-max: 1280px;
  --container-narrow: 820px;
  --gutter: clamp(1rem, 0.6rem + 2vw, 2rem);            /* Side padding: 16px on phones */
  --section-space: clamp(4.5rem, 3rem + 5.5vw, 8rem);     /* Vertical rhythm between sections */
  --grid-gap: clamp(1rem, 0.7rem + 1vw, 1.75rem);
  --header-height: 68px;                                /* 76px from 992px, see responsive.css */

  /* ------------------------------------------------------------------------
     5. Radii
     ------------------------------------------------------------------------ */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 10px;                   /* Buttons, inputs */
  --radius-lg: 16px;                   /* Small cards */
  --radius-xl: 20px;                   /* Cards, panels */
  --radius-2xl: 28px;                  /* Feature bands */
  --radius-pill: 999px;

  /* ------------------------------------------------------------------------
     6. Shadows (soft and subtle)
     ------------------------------------------------------------------------ */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.03);
  --shadow-md: 0 8px 24px -8px rgba(0, 0, 0, 0.1), 0 2px 6px -2px rgba(0, 0, 0, 0.04);
  --shadow-lg: 0 24px 48px -16px rgba(0, 0, 0, 0.14), 0 6px 14px -6px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 32px 72px -20px rgba(0, 0, 0, 0.3);
  --shadow-card-hover: 0 24px 48px -24px rgba(0, 0, 0, 0.22);
  --shadow-header: 0 1px 0 rgba(0, 0, 0, 0.06);

  /* ------------------------------------------------------------------------
     7. Motion
     ------------------------------------------------------------------------ */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast: 150ms;
  --duration-base: 250ms;
  --duration-slow: 450ms;
  --duration-reveal: 800ms;

  /* ------------------------------------------------------------------------
     8. Z-index layers
     ------------------------------------------------------------------------ */
  --z-raised: 2;
  --z-sticky: 50;
  --z-header: 100;
  --z-float: 150;
  --z-drawer: 300;
  --z-toast: 500;

  /* ------------------------------------------------------------------------
     9. Breakpoints (reference only)
     CSS variables cannot be used inside @media, so responsive.css repeats
     these values. Mobile-first: styles apply from the width upwards.
     ------------------------------------------------------------------------ */
  --bp-sm: 576px;
  --bp-md: 768px;
  --bp-lg: 992px;
  --bp-xl: 1200px;

  /* ------------------------------------------------------------------------
     10. Direction helper
     Multiply horizontal transforms by --dir so slide-ins and arrows flip
     automatically when the page is set to dir="rtl" (Arabic).
     ------------------------------------------------------------------------ */
  --dir: 1;

  /* Icons */
  --icon-size: 20px;
  --icon-stroke: 1.5;
}

[dir="rtl"] {
  --dir: -1;
}

/* Arabic: Latin text keeps Inter/Geist, Arabic glyphs use IBM Plex Sans Arabic
   (loaded by Locale.apply in js/components.js when Arabic is chosen). */
:lang(ar) {
  --font-sans: "Inter", "IBM Plex Sans Arabic", system-ui, -apple-system, "Segoe UI", Tahoma, sans-serif;
  --font-heading: "Geist", "IBM Plex Sans Arabic", var(--font-sans);
  --ls-caps: 0;
  --ls-wide-caps: 0;
}