/* ==========================================================================
   MSA 2026 Child: tokens.css
   Design tokens mirroring DESIGN.md. Keep the two in step: when a value here
   changes, update DESIGN.md too.
   Referenced by brand-signatures.css, patterns.css and all block patterns.
   ========================================================================== */

:root {
  /* ----------------------------------------------------------------------
     1. Colors (DESIGN.md section 1)
     The fall 2026 kit: MTU Black + MTU Gold. Michigan Tech UMC requires
     these exact values for student orgs that use black or yellow.
     Contrast ratios are WCAG 2.1, computed for every pair noted.
     To go back to navy later, change --color-primary (and --color-ink).
     ---------------------------------------------------------------------- */

  /* Brand */
  --color-primary: #000000;        /* MTU Black: headings, default buttons, dark panels (white on it 21:1) */
  --color-primary-hover: #333333;  /* Default button hover (white on it 12.63:1) */
  --color-accent: #FFCD00;         /* MTU Gold: fills, strips, accents ONLY. Never text on white (1.50:1). Black on gold 13.98:1; gold on black 13.98:1 */
  --color-accent-hover: #E6B800;   /* Gold button hover (black on it 11.22:1) */
  --color-on-accent: #000000;      /* Text on gold, always black (13.98:1), even if --color-primary changes */
  --color-accent-light: #FFE680;   /* Highlighter fill under words (black on it 16.88:1) */
  --color-accent-text: #7A5C00;    /* Dark gold for small TEXT on light bg (6.25:1 on white, 5.74:1 on surface-alt) */

  /* Neutrals */
  --color-surface: #FFFFFF;        /* Pure white: page background */
  --color-surface-alt: #F5F5F5;    /* Light neutral, no cream: section and card backgrounds (black on it 19.26:1) */
  --color-ink: #000000;            /* Body text, same as primary on purpose (21:1 on white) */
  --color-ink-muted: #5A5A5A;      /* Secondary text, metadata (6.90:1 on white, 6.33:1 on surface-alt) */
  --color-border: #E5E5E5;         /* Card borders and dividers (decorative only, not form fields) */
  --color-field-border: #6B6B6B;   /* Form field borders (5.33:1 on white, 4.89:1 on surface-alt; WCAG 1.4.11 needs 3:1) */
  --color-brushstroke-gray: #A8A8A8; /* Painterly gray brush stroke under Arabic (decorative) */

  /* On dark panels (.msa-panel-dark: hero, footer, title and number bands) */
  --color-on-dark: #FFFFFF;        /* Text on black (21:1) */
  --color-on-dark-muted: #B3B3B3;  /* Quieter text on black (10.02:1) */
  --color-on-dark-border: rgba(255, 255, 255, 0.24); /* Hairlines on black (decorative) */

  /* Keyboard focus rings */
  --color-focus: #000000;          /* Ring on light backgrounds (21:1 on white, 13.98:1 on gold) */
  --color-focus-on-dark: #FFCD00;  /* Ring on black (13.98:1) */

  /* Functional */
  --color-success: #2F7D4F;        /* Muted green: form success (5.04:1 on white) */
  --color-warning: #8A6100;        /* Dark amber: form warnings (5.54:1 on white) */
  --color-error: #A8341B;          /* Muted brick red: form errors (6.62:1 on white) */

  /* ----------------------------------------------------------------------
     2. Typography (DESIGN.md section 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, big numbers */
  --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;
  --tracking-label: 0.12em;     /* letter-spaced gold labels ("JOIN US") */

  /* ----------------------------------------------------------------------
     3. Spacing: 8px base scale (DESIGN.md section 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 section 4)
     ---------------------------------------------------------------------- */
  --width-content: 72rem;  /* 1152px: max content width */
  --width-text: 38rem;     /* 608px: readable text column */

  /* Breakpoint values (for reference; media queries use the literal rem values) */
  --bp-sm: 40rem;   /*  640px */
  --bp-md: 48rem;   /*  768px */
  --bp-lg: 64rem;   /* 1024px */
  --bp-xl: 80rem;   /* 1280px */

  /* ----------------------------------------------------------------------
     6. Decorative (DESIGN.md section 6)
     ---------------------------------------------------------------------- */
  --star-strip-height: 1.5rem;  /* 24px gold star band; tile is assets/decorative/star-strip.svg */

  /* ----------------------------------------------------------------------
     7. Motion (DESIGN.md section 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--accent-text: var(--color-accent-text);
  --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--on-dark-muted: var(--color-on-dark-muted);
  --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-accent-text-color { color: var(--wp--preset--color--accent-text) !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-on-dark-muted-color { color: var(--wp--preset--color--on-dark-muted) !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-accent-text-background-color { background-color: var(--wp--preset--color--accent-text) !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-on-dark-muted-background-color { background-color: var(--wp--preset--color--on-dark-muted) !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; }