/*!
 * ITG design tokens — DESIGN-PLAN.md Phase 1 (Foundation)
 * Created 2026-08-30.
 *
 * This file DECLARES the design system. It deliberately does not CONSUME it:
 * no selector here targets a page element, so loading it cannot change a single
 * rendered pixel. Phase 2 is what starts referencing these values.
 *
 * Load order matters — this is enqueued BEFORE the child stylesheet so later
 * rules can override tokens without an !important war (see functions.php).
 *
 * Values are taken from DESIGN-PLAN.md §2 and §3. Contrast ratios are measured
 * against white unless stated; AA text needs 4.5:1, non-text UI needs 3:1.
 */

:root {

  /* ---------------------------------------------------------------------
     Colour — §2 contrast audit, §3 colour tokens
     Six of the seven incumbent brand values failed AA. The primary blue
     survives, so the identity is preserved rather than rebranded.
     --------------------------------------------------------------------- */

  --itg-brand:        #1176BC;  /* 4.84:1  primary. Links, actions, active states */
  --itg-brand-deep:   #0B4877;  /* 8.95:1  headings on tint, hover states         */
  --itg-accent:       #8A4A05;  /* 6.45:1  corrected CTA orange, text-safe        */
  --itg-ink:          #0E1A2B;  /* navy-biased near-black, not neutral grey       */
  --itg-muted:        #5A6B7F;  /* 5.14:1  secondary text. Replaces #999 (2.85:1) */
  --itg-paper:        #F7F8FA;  /* page ground, cool bias toward the brand        */
  --itg-surface:      #FFFFFF;

  /* Retained for fills and borders ONLY — these fail AA as text.
     Kept as tokens so their misuse is greppable rather than invisible. */
  --itg-blue-light:   #149DD2;  /* 3.10:1 — fills and borders, never text         */
  --itg-border:       #E1E1E1;  /* 1.31:1 — rules only                            */

  /* Feedback */
  --itg-danger:       #D40000;  /* 5.25:1  required markers, errors               */
  --itg-success:      #1E7B34;

  /* ---------------------------------------------------------------------
     Type — §3 type scale
     Fifteen ad-hoc sizes (9px–32px) collapse to seven steps on a 1.25 ratio,
     in rem so browser zoom and user font preferences work.
     --------------------------------------------------------------------- */

  --itg-font-body:    "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --itg-font-arabic:  "Droid Arabic Naskh", "Segoe UI", Tahoma, sans-serif;

  --itg-size-display: 2.5rem;    /* 40px / 700 / -0.025em */
  --itg-size-h1:      2rem;      /* 32px / 700 / -0.02em  */
  --itg-size-h2:      1.5625rem; /* 25px / 600 / -0.012em */
  --itg-size-h3:      1.25rem;   /* 20px / 600            */
  --itg-size-body:    1rem;      /* 16px / 400            */
  --itg-size-small:   0.875rem;  /* 14px / 400            */
  --itg-size-label:   0.75rem;   /* 12px / 600 / 0.1em / uppercase */

  --itg-tracking-display: -0.025em;
  --itg-tracking-h1:      -0.02em;
  --itg-tracking-h2:      -0.012em;
  --itg-tracking-label:    0.1em;

  --itg-weight-regular: 400;
  --itg-weight-semi:    600;
  --itg-weight-bold:    700;

  --itg-leading-tight: 1.2;
  --itg-leading-body:  1.6;

  /* ---------------------------------------------------------------------
     Spacing — §3, 4/8-based scale replacing ad-hoc values
     --------------------------------------------------------------------- */

  --itg-space-1:  0.25rem;  /*  4px */
  --itg-space-2:  0.5rem;   /*  8px */
  --itg-space-3:  0.75rem;  /* 12px */
  --itg-space-4:  1rem;     /* 16px */
  --itg-space-6:  1.5rem;   /* 24px */
  --itg-space-8:  2rem;     /* 32px */
  --itg-space-12: 3rem;     /* 48px */
  --itg-space-16: 4rem;     /* 64px */
  --itg-space-24: 6rem;     /* 96px */

  /* ---------------------------------------------------------------------
     Layout & radius — §3
     Container 1140 -> 1240 with 24px gutters. Radius 0–10px mixed -> 4/8/12.
     --------------------------------------------------------------------- */

  --itg-container:    1240px;
  --itg-gutter:       var(--itg-space-6);

  --itg-radius-sm:    4px;
  --itg-radius-md:    8px;
  --itg-radius-lg:    12px;

  /* Hero proportion — §3, 4.09:1 letterbox -> 2.4:1 desktop, 1.6:1 mobile */
  --itg-hero-ratio:        2.4;
  --itg-hero-ratio-mobile: 1.6;

  /* ---------------------------------------------------------------------
     Focus — Phase 2 requires a visible state on every interactive element
     --------------------------------------------------------------------- */

  --itg-focus-width:  3px;
  --itg-focus-color:  var(--itg-brand);
  --itg-focus-offset: 2px;

  /* ---------------------------------------------------------------------
     Breakpoints — recorded for reference only.
     Custom properties cannot be used in @media prelude, so these exist to
     document the three canonical values that Phase 1 collapses 15 down to.
     Authors: use 640px / 900px / 1240px and nothing else.
     --------------------------------------------------------------------- */

  --itg-bp-sm: 640px;
  --itg-bp-md: 900px;
  --itg-bp-lg: 1240px;
}

/*
 * Direction-aware defaults.
 *
 * The plan replaces the hand-maintained 2,437-line rtl.css with logical
 * properties. This token gives Phase 2 a single hook for the few genuine
 * exceptions (icon mirroring, numerals that must stay LTR).
 */
:root {
  --itg-flip: 1;
}
[dir="rtl"] {
  --itg-flip: -1;
  --itg-font-body: var(--itg-font-arabic);
}