/* Palette lifted from tasnef.sa/facilities (theme "Morafiq", style.css) and its artwork.
   Values marked (src) appear verbatim on the site; the rest are interpolated so each ramp has usable steps. */
:root{
/* Green — the Tasnef Facilities brand. 600 is the workhorse (63 uses in the stylesheet). */
--brand-50:#f1f7f6;   /* (src) services band */
--brand-100:#dce8e4;
--brand-200:#a9c2ba;
--brand-300:#56796f;  /* (src) hero CTA, dropdown hover */
--brand-400:#3a6457;  /* nav hover sits between 300 and 500 (#567970 src) */
--brand-500:#235647;  /* (src) company band, map arcs */
--brand-600:#0a4333;  /* (src) PRIMARY: logo, buttons, headings of figures, banners */
--brand-700:#0b3228;  /* (src) mobile menu, selected slot */
--brand-800:#06231b;
--brand-900:#03140f;

/* Purple — Tasnef Clean, the sister brand. Only for cross-promotion (side panel, Clean cards). */
--clean-400:#8165a4;  /* (src) Clean panel gradient */
--clean-500:#5f398e;  /* (src) Clean outline button */
--clean-600:#48296f;  /* (src) Clean panel */

/* Neutrals — literals from the stylesheet. */
--white:#ffffff;
--grey-50:#f9f9f9;    /* (src) section band, map ground */
--grey-60:#f9f9fc;    /* (src) table header */
--grey-75:#f9fafb;    /* (src) phone field */
--grey-100:#f7f7f7;   /* (src) chips, modal foot */
--grey-120:#f6f6f6;   /* (src) quantity box */
--grey-130:#f0f1f3;   /* (src) table border */
--grey-150:#ededed;   /* (src) hairline, map pill link */
--grey-200:#e3e3e3;   /* (src) footer divider */
--grey-250:#e5e7eb;   /* (src) phone field border */
--grey-300:#dbdbdb;   /* (src) field border */
--grey-350:#b7b8ba;   /* (src) breadcrumb */
--grey-400:#999999;
--grey-500:#717171;   /* (src) footer paragraph */
--grey-550:#797d82;   /* (src) summary rows */
--grey-600:#6c6c6c;   /* (src) long copy, map district */
--grey-650:#6d7783;   /* (src) legal */
--grey-700:#5a5a5a;
--grey-800:#292d32;   /* (src) contact line icons */
--grey-slate:#333843; /* (src) table ink */
--grey-glyph:#343740; /* (src) sun / moon glyphs */
--grey-900:#222222;
--black:#000000;

/* Map pin fills used on the projects map (src). Decorative only — never for UI state. */
--pin-lime:#81d742;--pin-amber:#dd9933;--pin-red:#dd3333;--pin-crimson:#dd043e;--pin-yellow:#eeee22;
--pin-blue:#1e73be;--pin-sky:#25a0ed;--pin-royal:#0f57dd;--pin-indigo:#271bad;--pin-violet:#8224e3;
--pin-teal:#44ddba;--pin-green:#137c07;--pin-forest:#0c682e;--pin-olive:#507a0c;--pin-moss:#82a016;--pin-black:#000000;

/* Not on the site — derived to sit with the green. */
--red-50:#fdeeee;--red-500:#c8372d;--red-600:#a52a22;
--amber-50:#fff6e0;--amber-500:#c98a12;

/* ── Semantic aliases — prefer these in product code ── */
--brand-primary:var(--brand-600);
--brand-primary-strong:var(--brand-700);
--brand-primary-soft:var(--brand-50);
--brand-logo:var(--brand-600);
--brand-accent:var(--brand-300);
--brand-clean:var(--clean-600);

--text-heading:var(--black);
--text-body:var(--black);
--text-muted:var(--grey-600);
--text-subtle:var(--grey-500);
--text-legal:var(--grey-650);
--text-on-brand:var(--white);
--text-link:var(--brand-600);
--text-link-hover:var(--brand-300);
--text-table:var(--grey-slate);
--text-summary:var(--grey-550);
--text-crumb:var(--grey-350);

--surface-page:var(--white);
--surface-section:var(--grey-50);
--surface-mint:var(--brand-50);
--surface-card:var(--white);
--surface-chip:var(--grey-100);
--surface-field:var(--white);
--surface-field-soft:var(--grey-75);
--surface-brand:var(--brand-600);
--surface-brand-deep:var(--brand-700);
--surface-forest:var(--brand-500);
--surface-clean:var(--clean-600);
--surface-table-head:var(--grey-60);
--surface-stepper:var(--grey-120);
--surface-remove:var(--brand-50);

--border-hairline:var(--grey-150);
--border-divider:var(--grey-200);
--border-field:var(--grey-300);
--border-brand:var(--brand-600);
--border-rule:#e9e2ef; /* (src) advantages rule — the theme kept Clean's pale lilac line */
--border-table:var(--grey-130);

--state-success:var(--brand-500);--state-success-soft:var(--brand-50);
--state-warning:var(--amber-500);--state-warning-soft:var(--amber-50);
--state-danger:var(--red-500);--state-danger-soft:var(--red-50);
--state-info:var(--brand-300);--state-info-soft:var(--brand-50);

--focus-ring:var(--brand-300);
--overlay-scrim:rgba(3,20,15,.6)
}