/* design tokens */

:root {

  /* ---- colour ---- */

  --sg-white:      #ffffff;
  --sg-black:      #191919;

  --sg-grey-100:   #efefef;
  --sg-grey-200:   #e2e2e2;
  --sg-grey-300:   #cccccc;
  --sg-grey-400:   #959595;
  --sg-grey-500:   #767676;   /* lightest that passes AA on white */
  --sg-grey-600:   #606060;
  --sg-grey-700:   #4d4d4d;
  --sg-grey-800:   #363636;

  --sg-primary:       #a9c4bf;
  --sg-primary-light: #dfe7e5;
  --sg-primary-dark:  #7a958f;
  --sg-primary-text:  #546b66;   /* AA as text on white, the ramp above fails */
  --sg-maroon:        #7a2332;   /* the logo's maroon dot, brand accents and required marks */
  --sg-lime:          #e9fdcd;   /* pale lime from the 2027 campaign art */

  --sg-color-bg:          var(--sg-white);
  --sg-color-surface:     var(--sg-white);
  --sg-color-panel:       var(--sg-primary);
  --sg-color-text:        var(--sg-black);
  --sg-color-text-muted:  var(--sg-grey-600);
  --sg-color-text-invert: var(--sg-white);
  --sg-color-border:      var(--sg-grey-300);
  --sg-color-accent:      var(--sg-primary);
  --sg-color-link-hover:  var(--sg-primary);

  /* forms */
  --sg-color-error:         #b3261e;   /* 5.9:1 on white */
  --sg-color-error-bg:      #fbeae9;
  --sg-color-success:       #2e6b4a;   /* 6.5:1 on white */
  --sg-color-success-bg:    #e6f1ea;
  --sg-color-disabled-bg:   var(--sg-grey-100);
  --sg-color-disabled-text: var(--sg-grey-500);
  --sg-color-placeholder:   var(--sg-grey-500);
  --sg-color-focus:         var(--sg-black);

  --sg-surface-overlay: rgb(255 255 255 / 0.9);


  /* ---- font ---- */

  --sg-font-body:    "new-atten", "Helvetica Neue", Arial, sans-serif;
  --sg-font-heading: "new-atten", "Helvetica Neue", Arial, sans-serif;
  --sg-font-serif:   "firelli-variable", Georgia, serif;          /* eyebrows and small labels, no italic in the kit */
  --sg-font-ui:      var(--sg-font-body);                          /* nav and controls, Inter retired 2026-09-04 */

  --sg-weight-base: 400;
  --sg-weight-lg:   600;
  --sg-weight-xl:   700;


  /* ---- size ----  desktop values, mobile steps to 80% below 768
     caps read bigger, set them 1-2 steps below body */

  --sg-text-2xs:  11px;
  --sg-text-xs:   12px;
  --sg-text-sm:   14px;
  --sg-text-base: 17px;
  --sg-text-lg:   22px;
  --sg-text-xl:   28px;
  --sg-text-2xl:  36px;
  --sg-text-3xl:  44px;
  --sg-text-4xl:  55px;
  --sg-text-5xl:  69px;
  --sg-text-6xl:  86px;


  /* ---- leading ---- */

  --sg-leading-2xs:  1;
  --sg-leading-xs:   1.1;
  --sg-leading-sm:   1.25;
  --sg-leading-base: 1.65;
  --sg-leading-lg:   1.8;
  --sg-leading-xl:   2;


  /* ---- tracking ---- */

  --sg-tracking-2xs:  -0.03em;
  --sg-tracking-xs:   -0.015em;
  --sg-tracking-base:  0;
  --sg-tracking-lg:    0.025em;
  --sg-tracking-xl:    0.05em;
  --sg-tracking-2xl:   0.1em;


  /* ---- space ----  8px grid */

  --sg-space-3xs:    4px;
  --sg-space-2xs:    8px;
  --sg-space-xs:    12px;
  --sg-space-sm:    16px;
  --sg-space-base:  24px;
  --sg-space-lg:    32px;
  --sg-space-xl:    40px;
  --sg-space-2xl:   48px;
  --sg-space-3xl:   64px;
  --sg-space-4xl:   80px;
  --sg-space-5xl:   96px;
  --sg-space-6xl:  128px;

  --sg-space-section: var(--sg-space-3xl);


  /* ---- layout ---- */

  --sg-grid-columns: 12;
  --sg-grid-gap:     var(--sg-space-sm);

  --sg-container:        1440px;
  --sg-container-narrow: 1200px;
  --sg-container-prose:  65ch;
  --sg-measure-max:      calc((var(--sg-container) - 2 * var(--sg-container-pad) - 11 * var(--sg-grid-gap)) / 12 * 8 + 7 * var(--sg-grid-gap)); /* 8 of 12 cols */
  --sg-container-pad:    var(--sg-space-sm);

  --sg-logo-w:        220px;   /* header and fly-out below the nav breakpoint, does not change on scroll */
  /* fits "Collaborating Partners" plus 24px inset each side, recheck on longer labels */
  --sg-submenu-w:     200px;

  --sg-nav-icon:      28px;    /* hamburger and close share one box */
  --sg-nav-icon-gap:  24px;    /* space between that icon and the logo */
  /* icon + gap, sits inside --sg-container-pad. header bar and fly-out
     both offset the logo by this, keep them matched */
  --sg-nav-inset:     calc(var(--sg-nav-icon) + var(--sg-nav-icon-gap));

  /* WP admin bar height when logged in, 0 otherwise */
  --sg-admin-bar: 0px;

  /* breakpoints are Sass vars, @media can't read var(). nav 1200, type 768 */


  /* ---- radius ---- */

  --sg-radius-none: 0;
  --sg-radius-sm:   3px;
  --sg-radius-base: 4px;
  --sg-radius-pill: 999px;
  --sg-radius-full: 50%;


  /* ---- border + shadow ---- */

  --sg-border-base: 1px;
  --sg-border-lg:   2px;

  --sg-shadow-sm: 0 4px 10px rgb(0 0 0 / 0.10);
  --sg-shadow-md: 0 12px 30px rgb(0 0 0 / 0.12);
}


/* mobile type, 80% of desktop. 768 not 1200 or tablets get phone text */
@media (max-width: 767px) {
  :root {
    --sg-text-2xs:  10px;
    --sg-text-xs:   11px;
    --sg-text-sm:   12px;
    --sg-text-base: 16px;
    --sg-text-lg:   18px;
    --sg-text-xl:   22px;
    --sg-text-2xl:  28px;
    --sg-text-3xl:  35px;
    --sg-text-4xl:  44px;
    --sg-text-5xl:  55px;
    --sg-text-6xl:  69px;
  }
}

/* keep in sync with $bp-nav */
@media (min-width: 1200px) {
  :root {
    --sg-container-pad: var(--sg-space-lg);   /* 32 */
    --sg-grid-gap:      var(--sg-space-lg);   /* 32 */
    --sg-space-section: var(--sg-space-4xl);  /* 80 */
    --sg-logo-w:        320px;                /* full lockup beside the desktop menu */
  }
}

body.admin-bar { --sg-admin-bar: 32px; }
@media (max-width: 782px) {
  body.admin-bar { --sg-admin-bar: 46px; }
}