/* DXHero web tokens — draft v0.2
   Built ON the DXHero Design System (css/brand/colors.css + fonts.css, copied verbatim from
   design-system/dxhero-design). This file only maps DS brand tokens to web roles and adds the
   web-specific type scale, spacing and layout. Never add raw hex here that the DS already defines.
   Iron rules: radius 0 · no shadows · deep indigo dominates · light accents ≤5% of any view. */

:root {
  /* ---- Surfaces ---- */
  --c-night: var(--dx-indigo-950);          /* footer, header after scroll */
  --c-paper: var(--dx-bg-1);
  --c-wash: var(--dx-bg-3);                 /* alternate light section; cards on it turn white */
  --grad-hero: var(--dx-grad-cover);        /* 135° — hero */
  --grad-band: var(--dx-grad-panel);        /* 180° — CTA band */
  --grad-still: var(--dx-grad-still);       /* radial — quiet dark section */

  /* ---- Text on light ---- */
  --c-ink: var(--dx-ink);
  --c-body: var(--dx-fg-1);
  --c-muted: var(--dx-fg-2);
  --c-hint: var(--dx-fg-3);
  --c-line: var(--dx-line);
  --c-line-soft: var(--dx-line-soft);

  /* ---- Text on dark (single white + alpha ladder) ---- */
  --c-on-dark: var(--dx-on-dark);
  --c-on-dark-body: var(--dx-on-dark-3);
  --c-on-dark-muted: var(--dx-on-dark-5);
  --c-line-dark: var(--dx-on-dark-rule);

  /* ---- Brand roles ---- */
  --c-primary: var(--dx-indigo-800);        /* primary button on light, brand fills */
  --c-secondary: var(--dx-indigo-600);      /* eyebrows, rules, links on light */
  --c-electric: var(--dx-blue-500);         /* hover states, single live indicators */
  --c-accent-on-dark: var(--dx-blue-400);   /* H1 second line, rules on dark — use sparingly */
  --c-tag: var(--dx-blue-500);              /* section tags, their ">" and rule, selected states on light */
  --c-tag-on-dark: #8A9BFF;                 /* the same on dark grounds */

  /* ---- Type ---- */
  --font-display: var(--dx-font-display);  /* Inter Display */
  --font-body: var(--dx-font-body);        /* Inter */
  --font-mono: var(--dx-font-mono);
  --font-arabic: "IBM Plex Sans Arabic", "Noto Sans Arabic", Tahoma, sans-serif;

  /* Web ladder: DS Major-Third steps, made fluid between 375px and 1280px */
  --fs-hero: clamp(2.5rem, 1.55rem + 4.05vw, 4.75rem);   /* 40 → 76 */
  --fs-section: clamp(1.75rem, 1.45rem + 1.25vw, 2.5rem); /* 28 → 40 */
  --fs-title: clamp(1.25rem, 1.12rem + 0.55vw, 1.5rem);  /* 20 → 24 */
  --fs-stat: clamp(3rem, 2.2rem + 3.4vw, 4.75rem);       /* 48 → 76 */
  --fs-lead: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);    /* 17 → 20 (DS --t-subtitle scaled) */
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-eyebrow: 0.75rem;

  --lh-tight: 1.04;
  --lh-heading: 1.15;
  --lh-body: 1.6;
  --tr-hero: -0.022em;                      /* DS hero tracking */
  --tr-section: -0.015em;                   /* DS section tracking */
  --tr-stat: -0.025em;                      /* DS stat tracking */
  --tr-eyebrow: 0.14em;                     /* DS eyebrow tracking */

  /* ---- Spacing: DS 8pt scale (4/8/16/24/32/48/64/96) + web section rhythm ---- */
  --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 1rem;   --sp-4: 1.5rem;
  --sp-5: 2rem;    --sp-6: 3rem;   --sp-7: 4rem;   --sp-8: 6rem;
  --section-pad: clamp(3.5rem, 2.6rem + 3.8vw, 6rem);    /* 56 → 96 */

  /* ---- Layout ---- */
  --container: 75rem;                       /* 1200px content width */
  --gutter: clamp(1rem, 0.55rem + 1.9vw, 2rem);
  --grid-gap: 1.5rem;

  /* ---- Shape & motion ---- */
  --radius: var(--dx-radius);               /* 0 — non-negotiable */
  --border: var(--dx-border);
  --border-dark: 1px solid var(--dx-on-dark-rule);
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur: 200ms;
  --dur-reveal: 550ms;                      /* DS staggered reveal */
}

/* Arabic (/ar/): swap text faces; numerals and product names stay Latin */
:root:lang(ar) {
  --font-display: var(--font-arabic);
  --font-body: var(--font-arabic);
  --lh-body: 1.8;
  --tr-hero: 0; --tr-section: 0; --tr-eyebrow: 0;
}