/* ============================================================
   MY COUNCIL FRAMEWORK — Design Tokens
   Single source of truth for colour, type, spacing & elevation.
   Import this file (or translate to your framework's token format:
   Tailwind theme, CSS-in-JS, SCSS vars, Style Dictionary, etc.)
   ============================================================ */

:root{
  /* ---------------------------------------------------------
     BRAND PALETTE  (from the logo)
     --------------------------------------------------------- */
  --mcf-dark-blue:   #011A39;  /* rgb(1,26,57)    */
  --mcf-light-blue:  #0049A5;  /* rgb(0,73,165)   */
  --mcf-dark-teal:   #006A7A;  /* rgb(0,106,122)  */
  --mcf-light-teal:  #009BA8;  /* rgb(0,155,168)  */
  --mcf-dark-green:  #008C36;  /* rgb(0,140,54)   */
  --mcf-light-green: #4EB00F;  /* rgb(78,176,15)  */

  /* DIGITAL ACCENT — interactive states only, never in logo/print */
  --mcf-purple:      #7C3AED;  /* rgb(124,58,237) */

  /* ---------------------------------------------------------
     NEUTRALS  (warm, low-chroma)
     --------------------------------------------------------- */
  --mcf-paper:    #FBFBF8;  /* page background        */
  --mcf-paper-2:  #F4F4F0;  /* subtle alt background  */
  --mcf-ink:      #011A39;  /* = dark-blue, body text */
  --mcf-muted:    #586472;  /* secondary text         */
  --mcf-faint:    #8A93A0;  /* tertiary / captions    */
  --mcf-line:     #E2E6EA;  /* hairline borders       */
  --mcf-line-2:   #D2D8DE;  /* stronger borders       */
  --mcf-white:    #FFFFFF;

  /* ---------------------------------------------------------
     SEMANTIC ROLES  (use these in components, not raw hex)
     --------------------------------------------------------- */
  --mcf-text:            var(--mcf-ink);
  --mcf-text-secondary:  var(--mcf-muted);
  --mcf-bg:              var(--mcf-paper);
  --mcf-bg-inverse:      var(--mcf-dark-blue);
  --mcf-action:          var(--mcf-light-blue);   /* primary buttons */
  --mcf-action-hover:    #003A85;
  --mcf-link:            var(--mcf-light-blue);    /* on light bg */
  --mcf-link-on-dark:    var(--mcf-light-green);   /* on navy bg  */
  --mcf-focus:           var(--mcf-purple);        /* focus ring  */
  --mcf-success:         var(--mcf-dark-green);
  --mcf-info:            var(--mcf-dark-teal);
  --mcf-error:           #B42318;
  --mcf-highlight:       var(--mcf-light-green);   /* large/decorative only */

  /* ---------------------------------------------------------
     TYPOGRAPHY
     Outfit (Google Fonts) for everything; JetBrains Mono for
     data / code / technical labels.
     --------------------------------------------------------- */
  --mcf-font-sans: "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mcf-font-mono: "JetBrains Mono", ui-monospace, "SF Mono", monospace;

  /* type scale (web px) — never set body below 16px */
  --mcf-fs-display: 60px;  --mcf-fw-display: 700;  --mcf-ls-display: -0.025em;
  --mcf-fs-h1:      40px;  --mcf-fw-h1:      600;  --mcf-ls-h1:      -0.02em;
  --mcf-fs-h2:      30px;  --mcf-fw-h2:      600;  --mcf-ls-h2:      -0.02em;
  --mcf-fs-h3:      22px;  --mcf-fw-h3:      600;
  --mcf-fs-body:    16px;  --mcf-fw-body:    400;  --mcf-lh-body:    1.65;
  --mcf-fs-small:   13px;  --mcf-fw-small:   500;
  --mcf-fs-mono:    12px;

  /* weights available: 200 300 400 500 600 700 800 */

  /* ---------------------------------------------------------
     SPACING  (4px base scale)
     --------------------------------------------------------- */
  --mcf-space-1: 4px;
  --mcf-space-2: 8px;
  --mcf-space-3: 12px;
  --mcf-space-4: 16px;
  --mcf-space-5: 24px;
  --mcf-space-6: 32px;
  --mcf-space-7: 48px;
  --mcf-space-8: 64px;
  --mcf-space-9: 96px;

  /* ---------------------------------------------------------
     RADIUS & ELEVATION
     --------------------------------------------------------- */
  --mcf-radius-sm: 6px;
  --mcf-radius:    10px;
  --mcf-radius-lg: 16px;
  --mcf-radius-pill: 100px;

  --mcf-shadow-sm: 0 1px 2px rgba(1,26,57,.06);
  --mcf-shadow:    0 8px 30px rgba(1,26,57,.10);
  --mcf-shadow-lg: 0 16px 50px rgba(1,26,57,.16);

  /* ---------------------------------------------------------
     ACCESSIBILITY  (WCAG 2.2 AA — non-negotiable)
     --------------------------------------------------------- */
  --mcf-focus-ring: 3px solid var(--mcf-focus);
  --mcf-focus-offset: 2px;
  --mcf-min-target: 44px;   /* min interactive hit area */
}

/* Global focus-visible default — keep this everywhere */
:where(a, button, input, select, textarea, [tabindex]):focus-visible{
  outline: var(--mcf-focus-ring);
  outline-offset: var(--mcf-focus-offset);
}