/* ==========================================================================
   ADES ALOULA — design tokens
   شركة الديس الأولى لاستيراد وسائل النقل وملحقاتها

   Same shape as design-system/tokens.css (Almotawakel): primitives only —
   colour, type, space, motion. Layout and components live in style.css.

   This site inverts the house ground: Almotawakel is ink-on-paper, ADES is
   light-on-steel. The accent rule is the same in structure — one chromatic
   token, legible on its own ground and forbidden on the other.

   Contrast figures are measured against the ground the token is actually
   used on, not estimated.
   ========================================================================== */

:root {
  /* ---- Surfaces ---------------------------------------------------------
     Near-black carrying a blue cast, so cyan sits in the same family as the
     ground instead of vibrating against a neutral grey. */
  --steel:        #0D1113;   /* page ground */
  --steel-2:      #151B1E;   /* raised: product cards, nav shell */
  --steel-3:      #1E262A;   /* recessed: spec rows, inset panels */

  --paper:        #F4F6F7;   /* the one light section, mid-page */
  --paper-2:      #FFFFFF;   /* raised on paper */

  /* ---- Light on steel ---------------------------------------------------- */
  --snow:         #FFFFFF;                    /* 18.98:1 on --steel  (AAA) */
  --snow-soft:    rgba(255, 255, 255, 0.72);  /* 10.01:1 on --steel  (AAA) */
  --snow-faint:   rgba(255, 255, 255, 0.56);  /*  6.41:1 on --steel  (AA)  */

  /* ---- Ink on paper ------------------------------------------------------ */
  --ink:          #101416;                    /* 17.60:1 on --paper  (AAA) */
  --ink-soft:     rgba(16, 20, 22, 0.66);     /*  5.78:1 on --paper  (AA)  */

  /* ---- Accent -----------------------------------------------------------
     Cyan is the only chromatic token, taken from the logo burst. It reads on
     steel and FAILS on paper (2.8:1) — so on light grounds it is never text,
     only a rule, an arrow or a fill. Use --volt-deep when it must be read
     on paper. This mirrors the bronze rule in the Almotawakel tokens. */
  /* Sampled from the client's logo.png, not estimated: --volt is the median
     colour of the mark's cyan pixels, the light/dark pair its 90th and 10th
     luminance percentiles — the highlight and shadow of the bevel. */
  --volt:         #0199DC;   /*  5.96:1 on --steel (AA) — 2.93:1 on paper, never use */
  --volt-deep:    #04658F;   /*  5.94:1 on --paper (AA) — too dark to read on steel  */
  --volt-glow:    rgba(1, 153, 220, 0.16);   /* fills, halos, never text   */

  --volt-light:   #00D8FC;   /* bevel highlight — mark only, never text */
  --volt-dark:    #0076AC;   /* bevel shadow    — mark only, never text */

  /* ---- Rules ------------------------------------------------------------- */
  --line:         rgba(255, 255, 255, 0.12);
  --line-strong:  rgba(255, 255, 255, 0.22);
  --line-paper:   rgba(16, 20, 22, 0.14);

  /* ---- Type -------------------------------------------------------------
     Archivo Black is the closest widely-available match to the ADES
     wordmark's heavy geometric grotesque, so headings and logo agree.
     Plex Sans Arabic is drawn to sit with Archivo — same pairing the
     Almotawakel system already uses. */
  --font-display: 'Archivo', 'IBM Plex Sans Arabic', system-ui, sans-serif;
  --font-body:    'IBM Plex Sans Arabic', 'Archivo', system-ui, sans-serif;
  /* Display Arabic, for the brand name only. Cairo Black is the closest
     widely available match to the logo's lettering: monolinear, flat
     terminals, squared counters. */
  --font-brand:   'Cairo', 'IBM Plex Sans Arabic', system-ui, sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, 'Cascadia Mono', monospace;

  /* Sized so the Arabic headline holds two lines beside the mark rather than
     shattering into four. Arabic sets much wider than Latin at equal size,
     so this runs smaller than a Latin-only hero would. */
  --t-hero:   clamp(2.1rem, min(0.9rem + 5.2vw, 9vh), 5rem);
  --t-h2:     clamp(1.75rem, 1.3rem + 2vw, 3.25rem);
  --t-h3:     clamp(1.15rem, 1.05rem + 0.7vw, 1.55rem);
  --t-lede:   clamp(1.02rem, 0.96rem + 0.4vw, 1.28rem);
  --t-body:   clamp(0.95rem, 0.92rem + 0.2vw, 1.05rem);
  --t-small:  0.86rem;
  --t-micro:  0.75rem;   /* 12px floor */

  /* ---- Space ------------------------------------------------------------- */
  --gutter:   clamp(1.15rem, 0.5rem + 2.8vw, 4rem);
  --section:  clamp(4.5rem, 2rem + 9vw, 10rem);
  --measure:  58ch;
  --radius:   4px;       /* near-square: this is a parts catalogue, not an app */

  /* ---- Motion -----------------------------------------------------------
     UI transitions stay under 300ms; only first-view marketing motion runs
     longer. --spring is for the small physical stuff (card lift, arrow fire)
     and deliberately overshoots; --ease-out never does. */
  --ease:      cubic-bezier(0.22, 0.85, 0.28, 1);
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --spring:    cubic-bezier(0.34, 1.56, 0.64, 1);
  --fast:      0.18s var(--ease);
  --press:     0.12s var(--ease-out);
  --lift:      0.34s var(--spring);

  /* Direction multiplier: flip directional transforms without a second
     stylesheet. translateX(calc(var(--dir) * 5px)) travels correctly in both. */
  --dir: 1;
}

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

/* Script-specific leading. Arabic needs materially more than Latin. */
[lang="ar"] { --leading-body: 1.95; --leading-display: 1.35; }
[lang="en"] { --leading-body: 1.65; --leading-display: 1.02; }

/* The page is dark; keeps native scrollbars and form controls dark. */
html { color-scheme: dark; }