/* ==========================================================================
   CV LINKER — DESIGN TOKENS
   --------------------------------------------------------------------------
   The single vocabulary for the whole site. Load this BEFORE every other
   stylesheet.

   This file replaces the six competing names the old CSS used for the same
   ideas (--brand / --accent / --primary-blue, --radius / --border-radius /
   --br) and the four variables that were referenced but never declared
   anywhere (--accent, --muted, --bg2, --animation-delay), which meant those
   rules silently did nothing.

   Every colour value here was measured for contrast, not chosen by eye.
   Ratios are stated next to each so nobody has to re-derive them.
   The chart series additionally pass colour-vision-deficiency separation.

   Direction-neutral by design: use logical properties (margin-inline-start,
   border-inline-end, padding-block) everywhere so Arabic RTL works from the
   same rules rather than a mirrored copy.
   ========================================================================== */

:root {
  /* ---- surfaces & ink ------------------------------------------------- */
  --ground:        #F7F8F6;   /* page background */
  --surface:       #FFFFFF;   /* cards, panels */
  --sunken:        #EFF2EE;   /* wells, table headers, disabled */
  --line:          #E2E7E2;   /* borders, dividers */

  --ink:           #14201E;   /* 15.71:1 on ground — body text, headings */
  --ink-2:         #465350;   /*  7.54:1 — secondary text */
  --ink-3:         #64716D;   /*  4.78:1 — labels, captions, muted */

  /* ---- brand ----------------------------------------------------------- */
  --primary:       #0B6A5E;   /*  6.49:1 on white — text, buttons, links */
  --primary-bright:#0F8C7C;   /* fills, charts, large areas ONLY (4.15:1) */
  --primary-tint:  #E6F2EF;   /* hover beds, focus rings, selected states */
  --accent:        #A85A17;   /*  5.07:1 — warmth, used sparingly */
  --accent-tint:   #FBF1E7;

  /* ---- status: reserved. Never reuse these as a chart series. ---------- */
  --ok:            #17705C;   /* approved, available, published */
  --ok-tint:       #E6F3EF;
  --warn:          #8A5B08;   /* pending review, expiring */
  --warn-tint:     #FBF2E0;
  --danger:        #B3261E;   /* rejected, errors, destructive */
  --danger-tint:   #FBEBEA;

  /* ---- chart series: fixed order, never cycled ------------------------- */
  /* A 7th category folds into "Other" — do not invent a hue. */
  --c1:#0F8C7C; --c2:#D97817; --c3:#3A66B0;
  --c4:#B03A72; --c5:#86A62B; --c6:#6B4A9E;

  /* ---- type ------------------------------------------------------------ */
  /* Both families carry genuine Arabic and Latin, drawn as one system. */
  --font-display: "Readex Pro", "IBM Plex Sans Arabic", system-ui, sans-serif;
  --font-body:    "IBM Plex Sans Arabic", "Readex Pro", system-ui,
                  -apple-system, "Segoe UI", sans-serif;
  --font-mono:    ui-monospace, "SF Mono", Menlo, monospace;

  --fs-display: 2.75rem;   /* 44px — page hero */
  --fs-h1:      2rem;      /* 32px */
  --fs-h2:      1.375rem;  /* 22px */
  --fs-h3:      1.125rem;  /* 18px */
  --fs-body:    1rem;      /* 16px */
  --fs-sm:      0.875rem;  /* 14px */
  --fs-micro:   0.75rem;   /* 12px — uppercase labels only */

  --lh-tight: 1.15;
  --lh-snug:  1.35;
  --lh-body:  1.6;

  /* ---- spacing: one 8px rhythm ---------------------------------------- */
  --sp-1:  8px;  --sp-2: 16px; --sp-3: 24px;
  --sp-4: 32px;  --sp-6: 48px; --sp-8: 64px;

  /* ---- geometry -------------------------------------------------------- */
  --r-sm:   6px;
  --r-md:  10px;
  --r-lg:  16px;
  --r-full: 999px;

  --sh-1: 0 1px 2px rgba(20,32,30,.06), 0 1px 3px rgba(20,32,30,.04);
  --sh-2: 0 2px 4px rgba(20,32,30,.05), 0 8px 20px -8px rgba(20,32,30,.12);
  --sh-3: 0 4px 8px rgba(20,32,30,.06), 0 20px 40px -16px rgba(20,32,30,.18);

  --ease: cubic-bezier(.4,0,.2,1);
  --dur:  .18s;

  --container: 1200px;
  --header-h:  72px;
}

/* --------------------------------------------------------------------------
   DARK PALETTE — EXPLICIT OPT-IN ONLY.

   Deliberately NOT wired to prefers-color-scheme. This is a WordPress theme,
   not a standalone page: Woodmart and Elementor render their chrome light
   regardless of the OS setting, so auto-switching produced near-black cards
   floating on a white page wrapper for every visitor whose system is in dark
   mode. The design system does not control enough of the page to flip it.

   Apply with data-theme="dark" on <html>, or .cvl-dark on a wrapper —
   intended for the dark marketing pages, where the chrome is dark too.
   Values validated against the dark surface (ink 15.46:1, ink-2 8.06:1,
   ink-3 5.08:1, primary 8.07:1); chart series pass CVD separation here too.
   -------------------------------------------------------------------------- */
:root[data-theme="dark"],
.cvl-dark {
  --ground:#101614; --surface:#191F1D; --sunken:#232B28; --line:#2C3532;
  --ink:#E8EDEA; --ink-2:#A2AFAA; --ink-3:#7C8A85;
  --primary:#3FBFAC; --primary-bright:#2AA895; --primary-tint:#152C28;
  --accent:#E0913F; --accent-tint:#2B2018;
  --ok:#3FBFA0;     --ok-tint:#142A25;
  --warn:#DFAE4B;   --warn-tint:#2A2417;
  --danger:#F08279; --danger-tint:#2E1917;
  --c1:#2AA895; --c2:#C9761F; --c3:#5B87CC;
  --c4:#CD5A90; --c5:#84A033; --c6:#8B6BBF;
  --sh-1: 0 1px 2px rgba(0,0,0,.40);
  --sh-2: 0 2px 4px rgba(0,0,0,.40), 0 8px 20px -8px rgba(0,0,0,.60);
  --sh-3: 0 4px 8px rgba(0,0,0,.40), 0 20px 40px -16px rgba(0,0,0,.70);
}

/* A dark wrapper must paint its own ground or it inherits the light page. */
.cvl-dark { background: var(--ground); color: var(--ink); }