/* Hallmark · macrostructure: Sector Gateway · tone: technical-authoritative-premium · anchor hue: royal-blue 268
 * Theme: brand-matched (T-Experts) · paper light · accent royal-blue + gold · display geometric-sans
 * Pre-emit critique: P5 H5 E4 S5 R4 V4
 * Design tokens — Technology Experts Group. Every colour/font/space referenced by name. */

:root {
  /* ---- Brand core (sampled from t-experts.com) ---- */
  --brand-blue:        oklch(38% 0.16 268);   /* #2B3293 royal indigo-blue — primary */
  --brand-blue-700:    oklch(31% 0.15 268);
  --brand-blue-900:    oklch(22% 0.10 268);
  --brand-gold:        oklch(85% 0.16 95);     /* #F0CF2C golden yellow — accent */
  --brand-gold-deep:   oklch(78% 0.16 80);

  /* ---- Paper & ink ---- */
  --color-paper:       oklch(99% 0.003 250);   /* near-white, faint cool */
  --color-paper-2:     oklch(97% 0.006 250);
  --color-paper-3:     oklch(94% 0.008 250);
  --color-ink:         oklch(22% 0.03 268);    /* near-black blue-tinted */
  --color-ink-soft:    oklch(42% 0.025 268);
  --color-ink-faint:   oklch(52% 0.02 268);
  /* the gold fill is theme-independent, so text on it must be too
     (--color-ink flips to near-white in dark mode -> 1.36:1 on gold) */
  --color-on-gold:     oklch(22% 0.03 268);
  --color-line:        oklch(90% 0.01 268);
  --color-line-strong: oklch(82% 0.015 268);

  /* ---- Dark surfaces ---- */
  --color-night:       oklch(17% 0.035 268);   /* deep blue-black #04080d-ish */
  --color-night-2:     oklch(22% 0.045 268);
  --color-night-3:     oklch(28% 0.05 268);
  --color-on-night:    oklch(96% 0.01 250);
  --color-on-night-soft: oklch(78% 0.02 250);

  /* ---- Semantic accent (default = brand blue) ---- */
  --color-accent:      var(--brand-blue);
  --color-accent-soft: oklch(94% 0.04 268);
  --color-gold:        var(--brand-gold);

  /* ---- Field accents ----
     One scheme for the whole group (Omar 2026-10-22): every field uses the brand pair the About
     pages use, gold accent and blue ink, so the site reads as one company; a field is told apart
     by its photograph and its name. The per-field tokens stay so pages need no change. The old
     hues were radiation amber, environment green, geology copper, mining bronze, training azure,
     safety orange, electronics teal, labs violet, water sea blue. */
  --f-accent:          var(--brand-gold);
  --f-ink:             var(--brand-blue);
  --f-radiation:       var(--f-accent);  --f-radiation-ink:   var(--f-ink);
  --f-environment:     var(--f-accent);  --f-environment-ink: var(--f-ink);
  --f-geology:         var(--f-accent);  --f-geology-ink:     var(--f-ink);
  --f-mining:          var(--f-accent);  --f-mining-ink:      var(--f-ink);
  --f-training:        var(--f-accent);  --f-training-ink:    var(--f-ink);
  --f-safety:          var(--f-accent);  --f-safety-ink:      var(--f-ink);
  --f-electronics:     var(--f-accent);  --f-electronics-ink: var(--f-ink);
  --f-labs:            var(--f-accent);  --f-labs-ink:        var(--f-ink);
  --f-water:           var(--f-accent);  --f-water-ink:       var(--f-ink);

  --color-focus:       oklch(58% 0.18 250);

  /* ---- Type ---- */
  --font-display: "Readex Pro", system-ui, sans-serif;
  --font-body:    "Readex Pro", system-ui, sans-serif;
  /* the Arabic face sits in the stack so Arabic characters never fall back to
     a system font with mono metrics; Latin still resolves to Space Mono */
  --font-mono:    "IBM Plex Mono", "Readex Pro", ui-monospace, "Cascadia Mono", monospace;
  --font-ar:      "Readex Pro", system-ui, sans-serif;

  /* fluid type scale */
  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --text-2xl:  clamp(1.5rem, 1.2rem + 1.4vw, 2.1rem);
  --text-3xl:  clamp(1.9rem, 1.4rem + 2.4vw, 3rem);
  --text-4xl:  clamp(2.4rem, 1.6rem + 3.8vw, 4.2rem);
  --text-display-s: clamp(2.6rem, 1.6rem + 4.6vw, 4.8rem);
  --text-display:   clamp(3rem, 1.6rem + 6.6vw, 6.2rem);

  /* ---- Space (4pt) ---- */
  --space-2xs: 0.25rem;
  --space-xs:  0.5rem;
  --space-sm:  0.75rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2.5rem;
  --space-2xl: 4rem;
  --space-3xl: 6.5rem;
  --space-4xl: 9rem;

  /* ---- Geometry ---- */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --rule: 1px;

  /* ---- Motion ---- */
  --dur-fast: 140ms;
  --dur-mid:  280ms;
  --dur-slow: 560ms;
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in:     cubic-bezier(0.4, 0, 1, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  /* ---- Elevation ---- */
  --shadow-sm: 0 1px 2px oklch(22% 0.03 268 / 0.06), 0 2px 8px oklch(22% 0.03 268 / 0.05);
  --shadow-md: 0 4px 12px oklch(22% 0.03 268 / 0.08), 0 12px 32px oklch(22% 0.03 268 / 0.08);
  --shadow-lg: 0 12px 28px oklch(22% 0.03 268 / 0.12), 0 30px 60px oklch(22% 0.03 268 / 0.14);

  /* Hero title ladder. --h1-base is the homepage size; every other level is a
     fixed fraction of it, so the order is fixed by construction rather than by
     five independent formulas that cross at different widths.
       home 1.00 · field hub .87 · group + utility .77 · service page .65 */
  --h1-base: clamp(2.2rem, 0.9rem + 4.6vw, 5rem);
  --h1-step: .87;                  /* a field hub unless the page says otherwise */
  --h1-short: 1;                   /* short viewports pull every level down */

  --maxw: 1240px;
  --maxw-text: 68ch;

  /* theme-aware surfaces */
  --contour-color: oklch(38% 0.16 268 / 0.09);
  --img-tint: oklch(34% 0.11 268 / 0.15);  /* navy wash unifies mixed photo sources */
  --img-filter: saturate(0.78) contrast(1.06) brightness(1.03);
  --font-ar-display: "Readex Pro", system-ui, sans-serif;
}

/* ============ DARK THEME ============ */
[data-theme="dark"] {
  --color-paper:       oklch(16% 0.018 268);
  --color-paper-2:     oklch(20% 0.022 268);
  --color-paper-3:     oklch(25% 0.028 268);
  --color-ink:         oklch(95% 0.008 250);
  --color-ink-soft:    oklch(78% 0.015 250);
  --color-ink-faint:   oklch(64% 0.02 250);
  --color-line:        oklch(30% 0.02 268);
  --color-line-strong: oklch(40% 0.025 268);

  --color-night:       oklch(11% 0.022 268);   /* deep recessed bands */
  --color-night-2:     oklch(15% 0.028 268);
  --color-night-3:     oklch(20% 0.035 268);

  --color-accent:      oklch(74% 0.13 268);    /* bright blue for text/icon accents */
  --color-accent-soft: oklch(30% 0.06 268);

  --contour-color:     oklch(72% 0.12 268 / 0.11);
  --img-tint:          oklch(20% 0.07 268 / 0.22);
  --img-filter:        saturate(0.78) contrast(1.05) brightness(0.9);

  --shadow-sm: 0 1px 2px oklch(0% 0 0 / 0.4), 0 2px 8px oklch(0% 0 0 / 0.3);
  --shadow-md: 0 4px 12px oklch(0% 0 0 / 0.45), 0 12px 32px oklch(0% 0 0 / 0.4);
  --shadow-lg: 0 12px 28px oklch(0% 0 0 / 0.5), 0 30px 60px oklch(0% 0 0 / 0.5);
}
/* field-accent: deep ink for text on light, bright accent on dark */
[data-field] { --field-accent: var(--field-ink); }
[data-theme="dark"] [data-field] { --field-accent: var(--field); }