/* Mirrored verbatim from the Tasnef Design System (tokens/colors.css).
   Do not hand-edit — re-sync from the design project instead.

   Palette lifted from tasnef.sa/wp-content/themes/Clean/style.css.
   Values marked (src) appear verbatim in the live stylesheet or logo; the rest are
   tints/shades interpolated between them so every ramp has usable steps. */
:root{
/* Purple — the brand. 600 is the workhorse (42 uses in the stylesheet). */
--purple-50:#f7f3fb;
--purple-100:#e9e2ef;  /* (src) advantages timeline rule */
--purple-200:#cdbfe0;
--purple-300:#8a6cba;  /* (src) hero CTA fill */
--purple-400:#6e4ea0;  /* (src) nav link hover */
--purple-500:#5f398e;  /* (src) logo, secondary buttons, dropdown */
--purple-600:#48296f;  /* (src) PRIMARY: hero field, buttons, headings of stats */
--purple-700:#321950;  /* (src) mobile menu, selected slot, submit button */
--purple-800:#241239;
--purple-900:#170b25;

/* Green — "تصنيف مرافق" / Tasnef Facilities sub-brand and promo marquee. */
--green-50:#eaf3f0;
--green-100:#cfe3dc;
--green-300:#6fa594;
--green-500:#1d6650;
--green-700:#0a4333;   /* (src) */
--green-900:#04231a;

/* Neutrals — every step is a literal from the stylesheet. */
--white:#ffffff;
--grey-50:#f9f9f9;     /* (src) section band */
--grey-75:#f9fafb;     /* (src) phone input field */
--grey-100:#f7f7f7;    /* (src) chip / modal foot */
--grey-150:#ededed;    /* (src) hairline */
--grey-200:#e3e3e3;    /* (src) footer divider */
--grey-250:#e5e7eb;    /* (src) phone input border */
--grey-300:#dbdbdb;    /* (src) input border */
--grey-400:#999999;
--grey-500:#717171;    /* (src) footer paragraph */
--grey-600:#6c6c6c;    /* (src) long-form paragraph */
--grey-650:#6d7783;    /* (src) legal / copyright */
--grey-700:#5a5a5a;
--grey-800:#292d32;    /* (src) contact line-icons */
--grey-900:#222222;
--black:#000000;

/* Support colours from the inner pages (calculator, cart, offers, breadcrumb). All (src). */
--purple-25:#f5efff;   /* remove-item tile */
--yellow-400:#ffeb3b;  /* diagonal corner ribbon */
--grey-60:#f9f9fc;     /* cart table header */
--grey-120:#f0f0f0;    /* quantity stepper */
--grey-130:#f0f1f3;    /* cart table border */
--grey-350:#b7b8ba;    /* breadcrumb trail */
--grey-550:#797d82;    /* price summary rows */
--grey-slate:#333843;  /* cart table ink */
--grey-glyph:#343740;  /* sun / moon toggle glyphs */
--green-arc:#235647;   /* Facilities panel arcs (mrafq.svg) */

/* No error / warning colour exists on the site; these are derived to sit with the purple. */
--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(--purple-600);
--brand-primary-strong:var(--purple-700);
--brand-primary-soft:var(--purple-50);
--brand-logo:var(--purple-500);
--brand-accent:var(--purple-300);
--brand-facilities:var(--green-700);
--brand-ribbon:var(--yellow-400);

--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(--purple-600);
--text-link-hover:var(--purple-400);

--surface-page:var(--white);
--surface-section:var(--grey-50);
--surface-card:var(--white);
--surface-chip:var(--grey-100);
--surface-field:var(--white);
--surface-field-soft:var(--grey-75);
--surface-brand:var(--purple-600);
--surface-brand-deep:var(--purple-700);
--surface-facilities:var(--green-700);

--border-hairline:var(--grey-150);
--border-divider:var(--grey-200);
--border-field:var(--grey-300);
--border-brand:var(--purple-600);
--border-rule:var(--purple-100);
--border-table:var(--grey-130);

--surface-table-head:var(--grey-60);
--surface-stepper:var(--grey-120);
--surface-remove:var(--purple-25);
--text-table:var(--grey-slate);
--text-summary:var(--grey-550);
--text-crumb:var(--grey-350);

--state-success:var(--green-500);--state-success-soft:var(--green-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(--purple-500);--state-info-soft:var(--purple-50);

--focus-ring:var(--purple-300);
--overlay-scrim:rgba(23,11,37,.6)
}