/* 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);

  /* ---- Per-field accents (each field its own identity, in-family) ---- */
  --f-radiation:       oklch(80% 0.17 88);     /* amber-gold — radiation/caution */
  --f-radiation-ink:   oklch(48% 0.15 80);
  --f-environment:     oklch(62% 0.15 152);    /* green */
  --f-environment-ink: oklch(45% 0.12 152);
  --f-geology:         oklch(66% 0.13 48);     /* copper / terracotta */
  --f-geology-ink:     oklch(45% 0.12 45);
  --f-mining:          oklch(66% 0.10 80);     /* bronze-gold (Terra Noor) */
  --f-mining-ink:      oklch(48% 0.09 78);
  --f-training:        oklch(66% 0.16 245);    /* azure */
  --f-training-ink:    oklch(48% 0.15 250);
  --f-safety:          oklch(72% 0.16 32);     /* signal orange */
  --f-safety-ink:      oklch(47% 0.17 32);
  --f-electronics:     oklch(64% 0.13 196);    /* teal / cyan */
  --f-electronics-ink: oklch(48% 0.12 200);
  --f-labs:            oklch(66% 0.15 300);    /* violet */
  --f-labs-ink:        oklch(46% 0.15 300);
  --f-water:           oklch(66% 0.14 215);    /* sea blue */
  --f-water-ink:       oklch(48% 0.13 220);

  --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 */
  --header-bg: oklch(99% 0.003 250 / 0.78);
  --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);

  --header-bg:         oklch(16% 0.018 268 / 0.82);
  --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); }