/* ============================================================
   ZAMCO DESIGN TOKENS
   All pages consume these variables only. Do not introduce
   new hex values in page CSS without updating this file.
   2026-09-24 redesign: radius scale, elevation shadows and
   brand gradients added; brand palette + amber contrast
   contract unchanged.
   ============================================================ */
:root {
  /* Brand */
  --navy:        #284990;  /* primary: headers, hero bg */
  --navy-deep:   #0e1a33;  /* hero shade, duotone shadow stop */
  --amber:       #e0a43a;  /* accent — RESTRICTED: see note below */
  --ink:         #101725;  /* navy-black text / amber-button text */
  --footer-bg:   #0c1526;  /* deep navy-black footer */

  /* Neutrals */
  --bg:          #faf8f4;  /* warm near-white page background */
  --surface:     #ffffff;
  --line:        #ddd6c9;  /* 1px hairline on light bg */
  --line-navy:   rgba(255,255,255,.14); /* 1px hairline on navy */
  --text:        #1c2433;  /* body text on --bg  (12.7:1) */
  --text-muted:  #556072;  /* secondary text on --bg (5.9:1) */
  --text-on-navy:#f4f2ec;  /* text on navy/ink    (~14:1) */
  --text-on-navy-muted: #b9c3d6; /* muted on navy (7.3:1) */

  /*
   * AMBER CONTRAST CONTRACT (measured, WCAG 2.1):
   *   #e0a43a on #284990  = 3.90:1 → FAILS AA normal text, PASSES AA large (≥3:1)
   *   #e0a43a on #0e1a33  = 7.86:1 → passes everything
   *   #e0a43a on #ffffff / #faf8f4 ≈ 2.2:1 → NEVER use amber text on light bg
   *   #101725 on #e0a43a  = 8.15:1 → amber FILLED elements use --ink text
   * RULE: amber is for 1px rules/borders, icons/graphics (≥3:1 ok),
   *   large/bold display text (≥18.66px bold) on navy, and filled
   *   shapes carrying --ink text. Never amber body text on navy,
   *   never amber anything on light backgrounds except borders ≥2px
   *   under large components and filled buttons with --ink text.
   */

  /* Typography */
  --font-en:   'Archivo', 'Segoe UI', Arial, sans-serif;
  --font-ar:   'Cairo', 'Archivo', 'Segoe UI', Arial, sans-serif;
  --font-mono: 'IBM Plex Mono', 'Courier New', monospace;

  --fs-xs:   0.75rem;
  --fs-sm:   0.875rem;
  --fs-base: 1rem;
  --fs-lg:   1.125rem;
  --fs-xl:   1.375rem;
  --fs-2xl:  clamp(1.5rem, 1.1rem + 1.6vw, 2rem);
  --fs-3xl:  clamp(1.875rem, 1.3rem + 2.6vw, 2.75rem);
  --fs-hero: clamp(2.125rem, 1.4rem + 3.4vw, 3.5rem);

  /* Spacing scale (8pt) */
  --sp-1: 0.5rem;  --sp-2: 1rem;  --sp-3: 1.5rem;  --sp-4: 2rem;
  --sp-5: 3rem;    --sp-6: 4rem;  --sp-7: 6rem;

  /* Brand gradients (decorative backgrounds only) */
  --grad-navy: linear-gradient(135deg, #2f52a3 0%, #1c3570 55%, #0e1a33 100%);
  --grad-amber: linear-gradient(135deg, #eab54c 0%, #d9952b 100%);

  /* Elevation — navy-tinted, not gray */
  --shadow-1: 0 1px 2px rgba(14,26,51,.06), 0 4px 12px rgba(14,26,51,.06);
  --shadow-2: 0 2px 4px rgba(14,26,51,.06), 0 12px 28px rgba(14,26,51,.12);
  --shadow-3: 0 8px 16px rgba(14,26,51,.10), 0 24px 48px rgba(14,26,51,.16);

  /* Layout */
  --container: 72rem;   /* 1152px */
  --container-wide: 80rem;
  --radius: .625rem;    /* 10px — modern corporate base radius */
  --radius-sm: .375rem; /* inputs, small controls */
  --radius-lg: 1rem;    /* cards, panels */
  --header-h: 4.5rem;

  /* Motion — restrained, ≤200ms */
  --dur: 180ms;
  --ease: cubic-bezier(.2,.6,.3,1);
}