:root{
/* ── Logo-derived core ───────────────────────────────────────────────
   Sampled directly from GOC_Logo.jpeg:
   candle body  #0253A4   flame #C2121F   wave #009778   wave shadow #6CB19F */
--goc-blue:#0253a4;
--goc-red:#c2121f;
--goc-green:#009778;
--goc-green-soft:#6cb19f;

/* ── Primary: Khorsheed Blue ramp (hue held at the logo's 212°) ──── */
--blue-50:#eef4fb;
--blue-100:#d6e5f5;
--blue-200:#aecbec;
--blue-300:#7dabdf;
--blue-400:#3c81c8;
--blue-500:#0253a4;   /* logo blue — brand primary */
--blue-600:#014487;
--blue-700:#01366b;
--blue-800:#002c57;   /* deep ground — hero / footer */
--blue-900:#001d3a;
--blue-950:#00101f;

/* ── Accent: Flame Red ramp (CTA + live state only) ─────────────── */
--red-50:#fdeef0;
--red-100:#f9d3d6;
--red-200:#f1a3a9;
--red-300:#e4636e;
--red-400:#d32c3a;
--red-500:#c2121f;    /* logo red */
--red-600:#a20d19;
--red-700:#7d0912;
--red-800:#57060c;

/* ── Secondary: Energy Green ramp (sustainability / recycling) ──── */
--green-50:#e8f6f2;
--green-100:#c6ebe2;
--green-200:#8ed6c6;
--green-300:#4fbba5;
--green-400:#16a487;
--green-500:#009778;  /* logo green */
--green-600:#007b62;
--green-700:#00604c;
--green-800:#00463a;

/* ── Neutrals: cool greys tinted 212° so greys sit under the blue ─ */
--neutral-0:#ffffff;
--neutral-25:#fafbfc;
--neutral-50:#f4f6f9;
--neutral-100:#e9edf2;
--neutral-200:#d8dee7;
--neutral-300:#bcc6d3;
--neutral-400:#94a1b2;
--neutral-500:#6d7b8d;
--neutral-600:#525f6f;
--neutral-700:#3c4757;
--neutral-800:#28313e;
--neutral-900:#171d26;

/* ── Industrial warm neutrals: steel, sand, brass ──────────────────
   Kuwait desert + refinery materiality. Texture and photo overlays only. */
--sand-100:#f2ede4;
--sand-300:#ddd2bf;
--sand-500:#b8a888;
--brass-500:#9a7b3f;

/* ── Semantic aliases ──────────────────────────────────────────── */
--brand-primary:var(--blue-500);
--brand-primary-hover:var(--blue-600);
--brand-primary-active:var(--blue-700);
--brand-accent:var(--red-500);
--brand-accent-hover:var(--red-600);
--brand-secondary:var(--green-500);
--brand-secondary-hover:var(--green-600);

--surface-page:var(--neutral-0);
--surface-subtle:var(--neutral-50);
--surface-card:var(--neutral-0);
--surface-card-subtle:var(--neutral-25);
--surface-inverse:var(--blue-800);
--surface-inverse-deep:var(--blue-950);
--surface-brand:var(--blue-500);
--surface-accent:var(--red-500);
--surface-secondary:var(--green-500);
--surface-overlay:rgba(0,44,87,.72);
--surface-glass:rgba(255,255,255,.08);

--text-heading:var(--blue-900);
--text-body:var(--neutral-700);
--text-muted:var(--neutral-500);
--text-on-brand:#ffffff;
--text-on-inverse:#ffffff;
--text-on-inverse-muted:rgba(255,255,255,.72);
--text-link:var(--blue-600);
--text-link-hover:var(--red-500);

--border-subtle:var(--neutral-200);
--border-strong:var(--neutral-300);
--border-inverse:rgba(255,255,255,.18);
--border-focus:var(--blue-400);

--state-success:var(--green-600);
--state-success-surface:var(--green-50);
--state-warning:#b7791f;
--state-warning-surface:#fdf6e7;
--state-danger:var(--red-600);
--state-danger-surface:var(--red-50);
--state-info:var(--blue-600);
--state-info-surface:var(--blue-50);

--focus-ring:0 0 0 3px rgba(2,83,164,.32);
--focus-ring-inverse:0 0 0 3px rgba(255,255,255,.45);

/* ── Signature gradients (used sparingly: hero grounds, wave rules) ─ */
--grad-deep:linear-gradient(160deg,var(--blue-700) 0%,var(--blue-900) 100%); /* @kind other */
--grad-flame:linear-gradient(135deg,var(--red-500) 0%,var(--red-700) 100%); /* @kind other */
--grad-wave:linear-gradient(90deg,var(--green-500) 0%,var(--green-soft,#6cb19f) 100%); /* @kind other */
--grad-hero-scrim:linear-gradient(180deg,rgba(0,29,58,0) 0%,rgba(0,29,58,.35) 45%,rgba(0,29,58,.88) 100%); /* @kind other */
--grad-rule:linear-gradient(90deg,var(--blue-500) 0%,var(--green-500) 55%,var(--red-500) 100%); /* @kind other */
}