/* ===== Aramco brand tokens (Brand Guidelines 2024) ===== */
@font-face { font-family: 'Inter'; src: url('/assets/fonts/Inter-Light.ttf') format('truetype'); font-weight: 300; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('/assets/fonts/Inter-Regular.ttf') format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('/assets/fonts/Inter-SemiBold.ttf') format('truetype'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('/assets/fonts/Inter-Bold.ttf') format('truetype'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Tajawal'; src: url('/assets/fonts/Tajawal-Regular.ttf') format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Tajawal'; src: url('/assets/fonts/Tajawal-Medium.ttf') format('truetype'); font-weight: 500 600; font-display: swap; }
@font-face { font-family: 'Tajawal'; src: url('/assets/fonts/Tajawal-Bold.ttf') format('truetype'); font-weight: 700; font-display: swap; }

:root {
  --aramco-green: #84BD00;
  --aramco-dark-green: #00843D;
  --aramco-blue: #00A3E0;
  --aramco-dark-blue: #0033A0;
  --aramco-gray: #5F6369;
  --neutral-gray: #C0C0C0;
  --light-gray: #DADADA;
  --dark-gray: #323232;
  --teal: #26A8AB;
  --purple: #643278;
  --yellow: #FFC846;
  --red: #F05F41;

  --r5: #00843D; --r4: #84BD00; --r3: #B9BEC4; --r2: #F08A41; --r1: #D2361E;

  --bg: #F3F5F8;
  --surface: #FFFFFF;
  --surface-2: #F7F8FA;
  --ink: #1F2328;
  --ink-2: #5F6369;
  --ink-3: #8A8F96;
  --line: #E4E7EB;
  --accent: var(--aramco-blue);
  --radius: 14px;
  --shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 8px 24px rgba(16, 24, 40, .06);
  --font: 'Segoe UI', 'Inter', system-ui, -apple-system, sans-serif;
  --font-ar: 'Tajawal', 'Sakkal Majalla', 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { font-family: var(--font); color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; }
[dir="rtl"] body, body[dir="rtl"], [lang="ar"] { font-family: var(--font-ar); }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--aramco-dark-blue); }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--aramco-blue) 55%, transparent); outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }