/* design tokens. --maf- prefix, t-shirt sizes, 8px grid
   brutalist black and white: hard black rules, no shadows, no radius, greys only for disabled states */

:root {

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

  --maf-white:      #ffffff;
  --maf-black:      #000000;

  --maf-grey-100:   #f7f7f7;
  --maf-grey-200:   #e4e4e4;
  --maf-grey-300:   #cccccc;
  --maf-grey-400:   #939598;
  --maf-grey-500:   #767676;   /* lightest that passes AA on white */
  --maf-grey-600:   #5b5b5b;
  --maf-grey-700:   #4d4d4d;
  --maf-grey-800:   #222222;

  --maf-color-bg:          var(--maf-white);
  --maf-color-surface:     var(--maf-white);
  --maf-color-panel:       var(--maf-black);    /* footer */
  --maf-color-text:        var(--maf-black);
  --maf-color-text-muted:  var(--maf-black);    /* no tints, secondary text is smaller or caps */
  --maf-color-text-invert: var(--maf-white);
  --maf-color-border:      var(--maf-black);
  --maf-color-accent:      var(--maf-black);
  --maf-color-link-hover:  var(--maf-black);    /* hover is underline weight or opacity, never colour */

  /* forms. no colour on the site, states are weight and tone */
  --maf-color-error:         var(--maf-black);
  --maf-color-error-bg:      var(--maf-grey-100);
  --maf-color-success:       var(--maf-black);
  --maf-color-success-bg:    var(--maf-grey-100);
  --maf-color-disabled-bg:   var(--maf-grey-100);
  --maf-color-disabled-text: var(--maf-grey-500);
  --maf-color-placeholder:   var(--maf-grey-500);
  --maf-color-focus:         var(--maf-black);

  --maf-surface-overlay: var(--maf-white);


  /* ---- font ----  typekit kit lkv6apl */

  --maf-font-body:    "neue-haas-grotesk-text", "Helvetica Neue", Arial, sans-serif;
  --maf-font-heading: "neue-haas-grotesk-text", "Helvetica Neue", Arial, sans-serif;
  --maf-font-ui:      var(--maf-font-body);   /* nav and controls */

  --maf-weight-base: 400;
  --maf-weight-lg:   500;
  --maf-weight-xl:   700;


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

  --maf-text-2xs:  11px;
  --maf-text-xs:   12px;
  --maf-text-sm:   14px;
  --maf-text-base: 16px;
  --maf-text-lg:   20px;
  --maf-text-xl:   24px;
  --maf-text-2xl:  32px;
  --maf-text-3xl:  40px;
  --maf-text-4xl:  48px;
  --maf-text-5xl:  64px;
  --maf-text-6xl:  80px;


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

  --maf-leading-2xs:  1;
  --maf-leading-xs:   1.1;
  --maf-leading-sm:   1.25;
  --maf-leading-base: 1.5;
  --maf-leading-lg:   1.65;
  --maf-leading-xl:   2;


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

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


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

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

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


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

  --maf-grid-columns: 12;
  --maf-grid-gap:     var(--maf-space-sm);   /* 16 between columns, 32 from the nav breakpoint */
  --maf-row-gap:      var(--maf-space-sm);   /* 16 between stacked children, every breakpoint */
  --maf-section-gap:  var(--maf-space-sm);   /* 16 above and below each top-level container, 64 from the nav breakpoint */

  --maf-container:        1440px;
  --maf-container-narrow: 1200px;
  --maf-container-prose:  65ch;
  --maf-container-pad:    var(--maf-space-sm);   /* 16, 32 from the nav breakpoint */
  --maf-measure-max:      calc((var(--maf-container) - 2 * var(--maf-container-pad) - 11 * var(--maf-grid-gap)) / 12 * 8 + 7 * var(--maf-grid-gap)); /* 8 of 12 cols */

  --maf-logo-h:       48px;    /* header and fly-out logo height, the lockup is 300x165 so width follows */

  --maf-nav-icon:     28px;    /* hamburger and close share one box */

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

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


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

  --maf-radius-none: 0;
  --maf-radius-sm:   0;
  --maf-radius-base: 0;
  --maf-radius-pill: 999px;
  --maf-radius-full: 50%;


  /* ---- border + shadow ----  rules do the work shadows would */

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

  --maf-shadow-sm: none;   /* brutalist, edges are rules not shadows */
  --maf-shadow-md: none;


  /* ---- z ---- */

  --maf-z-header:  100;
  --maf-z-overlay: 200;
}


/* mobile type. 768 not 1024 or tablets get phone text */
@media (max-width: 767px) {
  :root {
    --maf-text-2xs:  10px;
    --maf-text-xs:   11px;
    --maf-text-sm:   13px;
    --maf-text-base: 15px;
    --maf-text-lg:   18px;
    --maf-text-xl:   20px;
    --maf-text-2xl:  26px;
    --maf-text-3xl:  32px;
    --maf-text-4xl:  40px;
    --maf-text-5xl:  48px;
    --maf-text-6xl:  64px;
  }
}

/* keep in sync with $bp-nav */
@media (min-width: 1024px) {
  :root {
    --maf-container-pad: var(--maf-space-lg);   /* 32 */
    --maf-grid-gap:      var(--maf-space-lg);   /* 32 */
    --maf-section-gap:   var(--maf-space-3xl);  /* 64 */
    --maf-space-section: var(--maf-space-4xl);  /* 80 */
    --maf-logo-h:        72px;
  }
}

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