/* ─────────────────────────────────────────────────────────────────────────
   RAQEEM theme — the ONE place the site's colours are defined.

   Every page gets it: site.css pulls it in with @import (storefront,
   checkout, guides, dashboard) and the studio's main.tsx links it before
   mounting. site.css, the studio stylesheet, the compiled utility bundle
   (raqeem.css), the wordmark, the checkout map pin and the studio canvas all
   read these variables; none of them carries a brand hex of its own. Change a
   value here and the whole site follows. (It is served without a version
   query, so a change can take up to 4 hours to reach a returning visitor.)

   Rules this palette was chosen under:
   - Every text/background pair passes WCAG AA (4.5:1). Ratios are noted.
   - Amber is reserved for buying: every buy / order button, nothing else.
   - Gold is the graduation-tassel accent. Never put dark text on gold; text
     on gold uses --brand-gold-deep with white.

   One file cannot read CSS and so holds literal colours: wwwroot/icon.svg,
   the favicon (pale green tile, gold ring). Redraw it by hand if
   --brand-green-soft or --brand-gold change.
   (The social cards in wwwroot/social/ are product photos on a neutral
   ground and carry no brand colour.)
   ───────────────────────────────────────────────────────────────────────── */

:root{
  /* brand green — the primary */
  --brand-green:#1F5135;        /* 9.18:1 on white */
  --brand-green-deep:#173D28;   /* hover / pressed */
  --brand-green-soft:#E5F0E8;   /* tinted surfaces, selected nav */
  --brand-green-muted:#3D6B50;  /* secondary accents */
  --brand-green-pale:#A3BCAB;
  --brand-green-mist:#93B59F;
  --brand-green-bright:#2F855A;  /* chosen / selected states: 4.54:1 with white */
  --brand-green-bright-deep:#25704A;
  /* WhatsApp's own green: the footer button's mark and edge */
  --brand-whatsapp:#25D366;

  /* amber — buy buttons only */
  --brand-amber:#B45309;        /* 5.02:1 with white text */
  --brand-amber-deep:#92400E;
  --brand-amber-soft:#FEF0D9;

  /* gold — the tassel accent */
  --brand-gold:#B7892B;         /* decoration only, never behind text */
  --brand-gold-deep:#8A6516;    /* gold behind text: 5.31:1 with white */
  --brand-gold-light:#E6C27A;   /* gold on dark backgrounds */

  /* neutrals: "ink and paper" (docs/brand, picked by the owner 2026-10-24),
     made clean on 2026-10-25: the owner wants no brown on screen, and the
     site to carry the same life as the garment colours. So the paper is a
     clean off white with a breath of green, never beige; the colour on the
     page comes from the garment tints below, not from the surfaces.
     Green stays the primary: no Egyptian lettering brand we surveyed owns
     green, while cream and black are crowded. */
  --brand-ink:#1F2621;          /* headings, 15.1:1 on paper */
  --brand-text:#3A433D;         /* long-form body copy, 10.1:1 on paper */
  --brand-muted:#5A625C;        /* secondary text, 5.9:1 on paper, 5.3:1 on tile */
  --brand-paper:#F8F9F7;        /* page background: clean paper */
  --brand-paper-2:#EEF3EF;      /* raised / alternate surfaces: a green mist */
  --brand-tile:#F0F3F1;         /* product tiles and cards */
  --brand-line:#E1E7E2;         /* hairlines and borders */

  /* garment tints: the catalogue's own garment colours (apparel-catalog.json)
     at about 22 percent on white. Category tiles and accents take turns
     through them, so the site wears the clothes' colours. Text on any of
     them stays --brand-ink (13:1 or better). */
  --tint-sky:#E4EFF8;           /* sky #9DC4E2 */
  --tint-pink:#FBE9EE;          /* pink #EDB4C2 */
  --tint-mint:#E3F4EC;          /* mint #A8DCC4 */
  --tint-lavender:#EEEAF6;      /* lavender #B9A9D6 */
  --tint-butter:#FBF1D3;        /* mustard #D4A02A */
  --tint-sage:#E8EEE0;          /* olive #5C6B3C */
  --brand-deep-ink:#14281D;     /* dark sections and the footer: paper on it 13.9:1 */
  --brand-kraft:#CDB48A;        /* packaging only, never on screen */
  --brand-danger:#B5342A;

  /* The compiled utility bundle (raqeem.css) declares its own --color-*
     tokens inside @layer theme. These unlayered declarations win over it, so
     every utility (bg-gold, text-ink, border-line, opacity variants) lands on
     the palette above. The names are historical: "gold" is the bundle's
     accent slot and is green here on purpose. */
  --color-ink:var(--brand-ink);
  --color-ink-soft:var(--brand-muted);
  --color-gold:var(--brand-green);
  --color-gold-deep:var(--brand-green-deep);
  --color-gold-soft:var(--brand-green-soft);
  --color-brand:var(--brand-green);
  --color-parchment:var(--brand-paper);
  --color-parchment-deep:var(--brand-paper-2);
  --color-paper:#fff;
  --color-line:var(--brand-line);
}