/* Souk Artisan — colour tokens. Values transcribed verbatim from the Figma file
   (Style Guide frame 1:6543 + Figma Variables). Do not round. */
:root{
/* ── Brand / primary ─────────────────────────────────────────── */
--sa-primary:#255A62;            /* "Primary" swatch, Figma var 3 */
--sa-primary-tint:#1F9E8E;       /* teal accent used on dashboard charts */
--sa-primary-soft:#8B9E9E;       /* muted teal for strokes + secondary text */

/* ── Support / terracotta ────────────────────────────────────── */
--sa-ink:#100D0C;                /* "Support" first swatch, Figma var 4 */
--sa-terracotta:#E8A15F;         /* Figma var 1 */
--sa-terracotta-strong:#FCA657;  /* discount badge fill */
--sa-terracotta-stroke:#FFB974;  /* 1px strokes on warm chips */
--sa-sand:#FDD4B4;              /* Figma var 2 — circle-outline category rings */
--sa-sand-soft:#FDEAD7;          /* home banner background */
--sa-cream:#FFF6F1;              /* Figma var color251 */

/* ── Neutrals (Style Guide "Grey" row, in file order) ────────── */
--sa-grey-700:#777777;
--sa-grey-200:#F2F2F3;
--sa-grey-400:#CCCCCC;
--sa-grey-100:#F8F8F8;
/* additional greys observed in product screens */
--sa-black:#000000;
--sa-near-black:#0D0D0D;
--sa-ink-900:#1B1B1B;
--sa-ink-800:#202226;
--sa-ink-750:#2A2B2A;
--sa-grey-800:#444444;
--sa-grey-650:#807E7C;         /* Figma var colorgray */
--sa-grey-600:#838383;
--sa-grey-550:#999999;
--sa-grey-500:#B0B0B0;         /* Figma var cancel */
--sa-grey-450:#A2A5B1;         /* struck-through price */
--sa-grey-350:#CACACA;
--sa-grey-300:#B0B0B0;
--sa-grey-250:#EEEFF2;
--sa-grey-150:#F3F3F3;
--sa-grey-125:#F3F3F7;         /* Figma var colorgreeeey */
--sa-grey-115:#EBEBF5;
--sa-white:#FFFFFF;            /* Figma var white — "Main White" */

/* ── Semantic / status ───────────────────────────────────────── */
--sa-success:#34C759;
--sa-warning:#FFD60A;
--sa-danger:#B0B0B0;           /* "cancel" — canceled orders read grey, not red */
--sa-accent-violet:#9747FF;    /* Figma slice-annotation stroke only */

/* ── Semantic aliases ────────────────────────────────────────── */
--text-primary:var(--sa-ink);
--text-secondary:var(--sa-grey-700);
--text-tertiary:var(--sa-grey-600);
--text-muted:var(--sa-grey-550);
--text-body:var(--sa-ink-800);
--text-price:var(--sa-primary);
--text-price-was:var(--sa-grey-450);
--text-on-primary:var(--sa-white);
--text-link:var(--sa-primary);

--surface-page:var(--sa-white);
--surface-card:var(--sa-white);
--surface-subtle:var(--sa-grey-200);
--surface-sunken:var(--sa-grey-100);
--surface-warm:var(--sa-sand-soft);
--surface-cream:var(--sa-cream);
--surface-inverse:var(--sa-ink);

--border-subtle:var(--sa-grey-250);
--border-default:var(--sa-grey-400);
--border-strong:var(--sa-ink-900);
--border-warm:var(--sa-sand);

--action-primary:var(--sa-primary);
--action-primary-text:var(--sa-white);
--action-secondary-bg:var(--sa-white);
--action-secondary-border:var(--sa-primary);
--action-disabled-bg:var(--sa-grey-400);
--action-disabled-text:var(--sa-white);
--action-accent:var(--sa-terracotta);
}