/* ==========================================================================
   MSA 2026 Child — tokens.css
   Design tokens mirroring DESIGN.md (LOCKED). Mirror exactly — do not edit
   values here without updating DESIGN.md first.
   Referenced by brand-signatures.css and all block patterns.
   ========================================================================== */

:root {
  /* ----------------------------------------------------------------------
     1. Colors (DESIGN.md §1)
     ---------------------------------------------------------------------- */

  /* Brand */
  --color-primary: #1A2332;        /* Deep navy/charcoal — headings, primary buttons, navbar */
  --color-primary-hover: #2A3548;  /* Slightly lifted navy — primary button hover */
  --color-accent: #F4C430;         /* Bright warm gold — CTAs, link hover, dividers, accents */
  --color-accent-hover: #E0B020;   /* Deeper gold — accent button hover */
  --color-accent-light: #FFE066;   /* Light highlighter yellow — inline highlight, brush bg */
  --color-accent-text: #866600;    /* Dark gold for small TEXT on light bg (5.4:1 on white, 5.0:1 on surface-alt) */

  /* Neutrals */
  --color-surface: #FFFFFF;        /* Pure white — page background */
  --color-surface-alt: #F9F7F2;    /* Soft warm off-white — section/card backgrounds */
  --color-ink: #1A2332;            /* Body text (intentionally same as primary) */
  --color-ink-muted: #5A5A5A;      /* Mid gray — secondary text, metadata, timestamps */
  --color-border: #E5E5E5;         /* Soft gray — card borders, dividers, input borders */
  --color-brushstroke-gray: #A8A8A8; /* Painterly gray — brush stroke under Arabic (decorative) */

  /* Functional */
  --color-success: #2F7D4F;        /* Muted green — form success */
  --color-warning: #B8851A;        /* Deeper gold — form warnings */
  --color-error: #A8341B;          /* Muted brick red — form errors */

  /* ----------------------------------------------------------------------
     2. Typography (DESIGN.md §2)
     ---------------------------------------------------------------------- */

  /* Font families */
  --font-display: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-script: 'Caveat', 'Comic Sans MS', cursive;
  --font-arabic: 'Amiri', serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace;

  /* Fluid type scale */
  --type-display-1: clamp(2.5rem, 4vw + 1rem, 4.5rem);   /* hero h1 */
  --type-display-2: clamp(2rem, 3vw + 1rem, 3.25rem);    /* page h1 */
  --type-h2: clamp(1.5rem, 2vw + 1rem, 2.25rem);
  --type-h3: clamp(1.25rem, 1vw + 1rem, 1.5rem);
  --type-h4: 1.125rem;
  --type-body: 1.0625rem;   /* ~17px */
  --type-small: 0.9375rem;
  --type-caption: 0.8125rem;

  /* Script accent type (Caveat is large by nature; size up) */
  --type-script-display: clamp(1.5rem, 2vw + 1rem, 2.5rem);
  --type-script-body: clamp(1.125rem, 1vw + 0.75rem, 1.5rem);

  /* Line height */
  --leading-display: 1.15;  /* tight, for bold sans display */
  --leading-heading: 1.3;
  --leading-body: 1.6;
  --leading-script: 1.4;    /* Caveat needs some breathing room */

  /* Tracking */
  --tracking-display: -0.01em;  /* slight negative on bold sans */
  --tracking-body: 0;
  --tracking-caption: 0.04em;

  /* ----------------------------------------------------------------------
     3. Spacing — 8px base scale (DESIGN.md §3)
     ---------------------------------------------------------------------- */
  --space-1: 0.25rem;   /*   4px */
  --space-2: 0.5rem;    /*   8px */
  --space-3: 0.75rem;   /*  12px */
  --space-4: 1rem;      /*  16px */
  --space-5: 1.5rem;    /*  24px */
  --space-6: 2rem;      /*  32px */
  --space-7: 3rem;      /*  48px */
  --space-8: 4rem;      /*  64px */
  --space-9: 6rem;      /*  96px */
  --space-10: 8rem;     /* 128px */

  /* ----------------------------------------------------------------------
     4. Layout (DESIGN.md §4)
     ---------------------------------------------------------------------- */
  --width-content: 72rem;  /* 1152px — max content width */
  --width-text: 38rem;     /* 608px — readable text column */

  /* Breakpoint values (referenced by media queries in brand-signatures.css) */
  --bp-sm: 40rem;   /*  640px */
  --bp-md: 48rem;   /*  768px */
  --bp-lg: 64rem;   /* 1024px */
  --bp-xl: 80rem;   /* 1280px */

  /* ----------------------------------------------------------------------
     7. Motion (DESIGN.md §7)
     ---------------------------------------------------------------------- */
  --transition: 200ms ease-out;  /* hover/focus only */
}

/* --------------------------------------------------------------------------
   Kadence bridge — point Kadence's global palette and font settings at the
   brand tokens above, so its header, navigation, footer, links and body text
   use the MSA look instead of Kadence's defaults. `html:root` outranks the
   `:root` rule Kadence prints later from its Customizer settings.
   -------------------------------------------------------------------------- */
html:root {
  --global-palette1: var(--color-primary);        /* accent: links, buttons */
  --global-palette2: var(--color-primary-hover);  /* accent hover */
  --global-palette3: var(--color-ink);            /* strongest text: headings */
  --global-palette4: var(--color-ink);            /* strong text: body */
  --global-palette5: var(--color-ink-muted);      /* medium text */
  --global-palette6: var(--color-ink-muted);      /* subtle text */
  --global-palette7: var(--color-border);         /* subtle background */
  --global-palette8: var(--color-surface-alt);    /* lighter background */
  --global-palette9: var(--color-surface);        /* base background */
  --global-body-font-family: var(--font-body);
  --global-heading-font-family: var(--font-display);
  --global-primary-nav-font-family: var(--font-display);
}

/* --------------------------------------------------------------------------
   theme.json preset fallback — Kadence swaps the theme's colour palette and
   font sizes for its own, so WordPress never prints the presets our patterns
   name (has-primary-color, has-display-1-font-size, ...). Recreate them here,
   mapped to the tokens above, the same way core would (incl. !important).
   -------------------------------------------------------------------------- */
html:root {
  --wp--preset--color--primary: var(--color-primary);
  --wp--preset--color--primary-hover: var(--color-primary-hover);
  --wp--preset--color--accent: var(--color-accent);
  --wp--preset--color--accent-hover: var(--color-accent-hover);
  --wp--preset--color--accent-light: var(--color-accent-light);
  --wp--preset--color--surface: var(--color-surface);
  --wp--preset--color--surface-alt: var(--color-surface-alt);
  --wp--preset--color--ink: var(--color-ink);
  --wp--preset--color--ink-muted: var(--color-ink-muted);
  --wp--preset--color--border: var(--color-border);
  --wp--preset--color--brushstroke-gray: var(--color-brushstroke-gray);
  --wp--preset--color--success: var(--color-success);
  --wp--preset--color--warning: var(--color-warning);
  --wp--preset--color--error: var(--color-error);
  --wp--preset--font-size--display-1: var(--type-display-1);
  --wp--preset--font-size--display-2: var(--type-display-2);
  --wp--preset--font-size--h2: var(--type-h2);
  --wp--preset--font-size--h3: var(--type-h3);
  --wp--preset--font-size--h4: var(--type-h4);
  --wp--preset--font-size--body: var(--type-body);
  --wp--preset--font-size--small: var(--type-small);
  --wp--preset--font-size--caption: var(--type-caption);
  --wp--preset--font-size--script-display: var(--type-script-display);
  --wp--preset--font-size--script-body: var(--type-script-body);
}
.has-primary-color { color: var(--wp--preset--color--primary) !important; }
.has-primary-hover-color { color: var(--wp--preset--color--primary-hover) !important; }
.has-accent-color { color: var(--wp--preset--color--accent) !important; }
.has-accent-hover-color { color: var(--wp--preset--color--accent-hover) !important; }
.has-accent-light-color { color: var(--wp--preset--color--accent-light) !important; }
.has-surface-color { color: var(--wp--preset--color--surface) !important; }
.has-surface-alt-color { color: var(--wp--preset--color--surface-alt) !important; }
.has-ink-color { color: var(--wp--preset--color--ink) !important; }
.has-ink-muted-color { color: var(--wp--preset--color--ink-muted) !important; }
.has-border-color { color: var(--wp--preset--color--border) !important; }
.has-brushstroke-gray-color { color: var(--wp--preset--color--brushstroke-gray) !important; }
.has-success-color { color: var(--wp--preset--color--success) !important; }
.has-warning-color { color: var(--wp--preset--color--warning) !important; }
.has-error-color { color: var(--wp--preset--color--error) !important; }
.has-primary-background-color { background-color: var(--wp--preset--color--primary) !important; }
.has-primary-hover-background-color { background-color: var(--wp--preset--color--primary-hover) !important; }
.has-accent-background-color { background-color: var(--wp--preset--color--accent) !important; }
.has-accent-hover-background-color { background-color: var(--wp--preset--color--accent-hover) !important; }
.has-accent-light-background-color { background-color: var(--wp--preset--color--accent-light) !important; }
.has-surface-background-color { background-color: var(--wp--preset--color--surface) !important; }
.has-surface-alt-background-color { background-color: var(--wp--preset--color--surface-alt) !important; }
.has-ink-background-color { background-color: var(--wp--preset--color--ink) !important; }
.has-ink-muted-background-color { background-color: var(--wp--preset--color--ink-muted) !important; }
.has-border-background-color { background-color: var(--wp--preset--color--border) !important; }
.has-brushstroke-gray-background-color { background-color: var(--wp--preset--color--brushstroke-gray) !important; }
.has-success-background-color { background-color: var(--wp--preset--color--success) !important; }
.has-warning-background-color { background-color: var(--wp--preset--color--warning) !important; }
.has-error-background-color { background-color: var(--wp--preset--color--error) !important; }
.has-display-1-font-size { font-size: var(--wp--preset--font-size--display-1) !important; }
.has-display-2-font-size { font-size: var(--wp--preset--font-size--display-2) !important; }
.has-h2-font-size { font-size: var(--wp--preset--font-size--h2) !important; }
.has-h3-font-size { font-size: var(--wp--preset--font-size--h3) !important; }
.has-h4-font-size { font-size: var(--wp--preset--font-size--h4) !important; }
.has-body-font-size { font-size: var(--wp--preset--font-size--body) !important; }
.has-small-font-size { font-size: var(--wp--preset--font-size--small) !important; }
.has-caption-font-size { font-size: var(--wp--preset--font-size--caption) !important; }
.has-script-display-font-size { font-size: var(--wp--preset--font-size--script-display) !important; }
.has-script-body-font-size { font-size: var(--wp--preset--font-size--script-body) !important; }