/**
  * @file
  * Variables for the MSU Extension theme.
  *
  * This file contains global variables for the MSU Extension theme.
  *
  * @see https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties
  */

/* X-Small (xs) Breakpoint (mobile-first) */
:root {
  /**
   * Border
   */
  /* Border Radius */
  --msu-border-radius-xs: 4px;
  --msu-border-radius-sm: 8px;
  --msu-border-radius-md: 12px;
  --msu-border-radius-lg: 16px;
  --msu-border-radius-xl: 20px;
  --msu-border-radius-2xl: 24px;
  --msu-border-radius-3xl: 32px;
  --msu-border-radius-4xl: 40px;
  --msu-border-radius-5xl: 48px;
  --msu-border-radius-pill: 9999px;
  --msu-border-radius-square: 0;
  --msu-border-radius-circle: 50%;

  /* Border Style */
  --msu-border-style-solid: solid;
  --msu-border-style-dashed: dashed;
  --msu-border-style-dotted: dotted;
  --msu-border-style-double: double;
  --msu-border-style-groove: groove;
  --msu-border-style-ridge: ridge;
  --msu-border-style-inset: inset;
  --msu-border-style-outset: outset;
  --msu-border-style-none: none;

  /* Border Width */
  --msu-border-width-xs: 1px;
  --msu-border-width-sm: 2px;
  --msu-border-width-md: 3px;
  --msu-border-width-lg: 4px;
  --msu-border-width-xl: 5px;
  --msu-border-width-2xl: 6px;

  /**
   * Breakpoints
   */
  --breakpoint-xs: 0;
  --msu-breakpoint-xs: 0px;
  --breakpoint-sm: 576px;
  --msu-breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --msu-breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --msu-breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
  --msu-breakpoint-xl: 1200px;
  --breakpoint-2xl: 1400px;
  --msu-breakpoint-2xl: 1400px;

  /* XS */
  --max-width-xs: 575px;

  /* SM */
  --min-width-sm: 576px;
  --max-width-sm: 767px;

  /* MD */
  --min-width-md: 768px;
  --max-width-md: 991px;

  /* LG */
  --min-width-lg: 992px;
  --max-width-lg: 1199px;

  /* XL */
  --min-width-xl: 1200px;
  --max-width-xl: 1399px;

  /* 2XL */
  --min-width-2xl: 1400px;

  /**
   * Elevation
   */
  /* Offset */
  --msu-offset-none: 0px;
  --msu-offset-xs: 1px;
  --msu-offset-neg-xs: -1px;
  --msu-offset-sm: 2px;
  --msu-offset-neg-sm: -2px;
  --msu-offset-md: 4px;
  --msu-offset-neg-md: -4px;
  --msu-offset-lg: 8px;
  --msu-offset-neg-lg: -8px;
  --msu-offset-xl: 12px;
  --msu-offset-neg-xl: -12px;
  --msu-offset-2xl: 16px;
  --msu-offset-neg-2xl: -16px;
  --msu-offset-3xl: 24px;
  --msu-offset-neg-3xl: -24px;
  --msu-offset-4xl: 32px;
  --msu-offset-neg-4xl: -32px;
  --msu-offset-5xl: 40px;
  --msu-offset-neg-5xl: -40px;
  --msu-offset-6xl: 48px;
  --msu-offset-neg-6xl: -48px;
  --msu-offset-7xl: 56px;
  --msu-offset-neg-7xl: -56px;
  --msu-offset-8xl: 64px;
  --msu-offset-neg-8xl: -64px;
  --msu-offset-9xl: 72px;
  --msu-offset-neg-9xl: -72px;
  --msu-offset-10xl: 80px;
  --msu-offset-neg-10xl: -80px;

  /* Blur */
  --msu-blur-none: 0px;
  --msu-blur-xs: 1px;
  --msu-blur-sm: 2px;
  --msu-blur-md: 4px;
  --msu-blur-lg: 8px;
  --msu-blur-xl: 12px;
  --msu-blur-2xl: 16px;
  --msu-blur-3xl: 24px;
  --msu-blur-4xl: 32px;
  --msu-blur-5xl: 40px;
  --msu-blur-6xl: 48px;
  --msu-blur-7xl: 56px;
  --msu-blur-8xl: 64px;
  --msu-blur-9xl: 72px;
  --msu-blur-10xl: 80px;

  /* Spread */
  --msu-spread-none: 0px;
  --msu-spread-xs: 1px;
  --msu-spread-sm: 2px;
  --msu-spread-md: 4px;
  --msu-spread-lg: 8px;
  --msu-spread-xl: 12px;
  --msu-spread-2xl: 16px;
  --msu-spread-3xl: 24px;
  --msu-spread-4xl: 32px;
  --msu-spread-5xl: 40px;
  --msu-spread-6xl: 48px;
  --msu-spread-7xl: 56px;
  --msu-spread-8xl: 64px;
  --msu-spread-9xl: 72px;
  --msu-spread-10xl: 80px;

  /**
   * Focus
   */
  --msu-focus-ring-width: 0.1875rem; /* 3px */
  --msu-focus-ring-style: solid;
  --msu-focus-color: #3e96ff;
  --msu-focus-ring-offset: 0.0625rem; /* 1px */
  --msu-focus-ring: var(--msu-focus-ring-width) var(--msu-focus-ring-style) var(--msu-focus-color);

  /**
   * Space
   */
  /* Based on 8px base but in rem units */
  --msu-space-base: 0.5rem; /* 8px */
  --msu-space-0: 0px;
  --msu-space-auto: auto;
  --msu-space-3xs: calc(var(--msu-space-base) / 4); /* 2px */
  --msu-space-2xs: calc(var(--msu-space-base) / 2); /* 4px */
  --msu-space-xs: var(--msu-space-base); /* 8px */
  --msu-space-sm: calc(var(--msu-space-base) * 1.5); /* 12px */
  --msu-space-md: calc(var(--msu-space-base) * 2); /* 16px */
  --msu-space-lg: calc(var(--msu-space-base) * 2.5); /* 20px */
  --msu-space-xl: calc(var(--msu-space-base) * 3); /* 24px */
  --msu-space-2xl: calc(var(--msu-space-base) * 4); /* 32px */
  --msu-space-3xl: calc(var(--msu-space-base) * 6); /* 48px */
  --msu-space-4xl: calc(var(--msu-space-base) * 9); /* 72px */
  --msu-space-5xl: calc(var(--msu-space-base) * 10); /* 80px */
  --msu-space-6xl: calc(var(--msu-space-base) * 12); /* 96px */
  --msu-space-7xl: calc(var(--msu-space-base) * 16); /* 128px */
  --msu-space-8xl: calc(var(--msu-space-base) * 20); /* 160px */
  --msu-space-9xl: calc(var(--msu-space-base) * 24); /* 192px */
  --msu-space-10xl: calc(var(--msu-space-base) * 32); /* 256px */

  /**
   * CSS Grid
   */
  --msu-gap: 0.75rem; /* 12px, smaller gap for mobile */
  --msu-grid-padding-inline: 1rem; /* 16px */
  --msu-content-max-width: 1320px;
  --msu-breakout-max-width: 1544px;
  /* On mobile devices, the grid is 6 columns. */
  --msu-grid-col-count: 6;

  --msu-breakout-size: calc((var(--msu-breakout-max-width) - var(--msu-content-max-width)) / 2);

  --msu-grid:
    [full-width-start breakout-start wide-start] minmax(0, var(--msu-breakout-size)) [content-start] repeat(var(--msu-grid-col-count), minmax(0px, 88px)) [content-end] minmax(0, var(--msu-breakout-size)) [breakout-end wide-end full-width-end];

  --msu-grid-12: repeat(12, minmax(min-content, 88px));
  /* --msu-grid-12: repeat(auto-fit, minmax(300px, 1fr)); */
  --msu-grid-12: [content-start] repeat(var(--msu-grid-col-count), minmax(0px, 88px)) [content-end];


  /* --msu-grid-3: repeat(3, minmax(0, 1fr));
  --msu-grid-cols-4: repeat(auto-fit, minmax(312px, 1fr));
  --msu-grid-6: repeat(6, minmax(0, 1fr)); */
  --msu-gutter-x: 0.75rem; /* 12px */

  /* --msu-gap: clamp(1rem, 6vw, 3rem); */
  --msu-full: minmax(var(--msu-gap), 1fr);
  --full: minmax(var(--msu-gap), 1fr);
  --msu-content: min(65ch, 100% - var(--msu-gap) * 2);
  --content: min(65ch, 100% - var(--msu-gap) * 2);
  --msu-popout: minmax(0, 2rem);
  --popout: minmax(0, 2rem);
  --msu-feature: minmax(0, 5rem);
  --feature: minmax(0, 5rem);

  /**
   * Typography
   */
  --msu-open-sans: "open-sans", "Open Sans", sans-serif;
  --msu-futura: "futura-pt", "Futura", sans-serif;
  --msu-georgia: Georgia, serif;
  --msu-font-sans: var(--msu-open-sans);
  --msu-font-serif: var(--msu-georgia);
  --msu-font-display: var(--msu-futura);
  --msu-font-decorative: var(--msu-font-display);
  --msu-font-monospace: monospace;
  --msu-font-script: cursive;
  --msu-font-fantasy: fantasy;
  --msu-font-handwriting: "Dancing Script", cursive;
  --msu-line-height-xs: 1; /* 16px */
  --msu-line-height-sm: 1.25; /* 20px */
  --msu-line-height-base: 1.5; /* 24px */
  --msu-line-height-lg: 1.75; /* 28px */
  --msu-line-height-xl: 2; /* 32px */
  --msu-line-height-headings: var(--msu-line-height-sm);

  /* Type Scales */
  --msu-minor-second: 1.067;
  --msu-major-second: 1.125;
  --msu-minor-third: 1.200;
  --msu-major-third: 1.25;
  --msu-perfect-fourth: 1.333;
  --msu-augmented-fourth: 1.414;
  --msu-perfect-fifth: 1.5;
  --msu-golden-ratio: 1.618;

  /* Scale from Utopia.fyi/Typescale.com/fluid-type-scale.com (1.200 Minor Scale) */
  /* @TODO: Convert these to clamp() so we have fluid typography! And also use
        the type scales above to generate the values, not hardcode like below. */
  --msu-text-base: 1rem; /* 16px */
  --msu-text-xs: 0.694rem; /* 11.11px */
  --msu-text-sm: 0.833rem; /* 13.33px */
  --msu-text-md: var(--text-base); /* 16px */
  --msu-text-lg: 1.2rem; /* 19.20px */
  --msu-text-lg: calc(var(--msu-text-base) * var(--msu-major-third));
  --msu-text-xl: 1.44rem; /* 23.04px */

  --msu-text-2xl: 1.728rem; /* 27.65px */
  --msu-text-3xl: 2.074rem; /* 33.18px */
  --msu-text-4xl: 2.488rem; /* 39.81px */
  --msu-text-5xl: 2.986rem; /* 47.78px */
  --msu-text-6xl: 3.583rem; /* 57.33px */
  --msu-text-7xl: 4.3rem; /* 68.8px */
  --msu-text-8xl: 5.16rem; /* 82.56px */
  --msu-text-9xl: 6.192rem; /* 99.07px */
  --msu-text-10xl: 7.43rem; /* 118.88px */

  --msu-heading6-size: var(--msu-text-base);
  --msu-heading5-size: calc(var(--msu-heading6-size) * var(--msu-minor-third));
  --msu-heading4-size: calc(var(--msu-heading5-size) * var(--msu-minor-third));
  --msu-heading3-size: calc(var(--msu-heading4-size) * var(--msu-minor-third));
  --msu-heading2-size: calc(var(--msu-heading3-size) * var(--msu-minor-third));
  --msu-heading1-size: calc(var(--msu-heading2-size) * var(--msu-minor-third));

  --msu-text-xs: clamp(0.79rem, -0.174vi + 0.834rem, 0.694rem);
  --msu-text-sm: clamp(0.889rem, -0.101vi + 0.914rem, 0.833rem);
  --msu-text-base: clamp(1rem, 0vi + 1rem, 1rem);
  --msu-text-lg: clamp(1.125rem, 0.136vi + 1.091rem, 1.2rem);
  --msu-text-xl: clamp(1.266rem, 0.317vi + 1.186rem, 1.44rem);
  --msu-text-2xl: clamp(1.424rem, 0.553vi + 1.286rem, 1.728rem);
  --msu-text-3xl: clamp(1.602rem, 0.858vi + 1.387rem, 2.074rem);
  --msu-text-4xl: clamp(1.802rem, 1.248vi + 1.49rem, 2.488rem);
  --msu-text-5xl: clamp(2.027rem, 1.743vi + 1.592rem, 2.986rem);
  --msu-text-6xl: clamp(2.281rem, 2.368vi + 1.689rem, 3.583rem);
  --msu-text-7xl: clamp(2.566rem, 3.153vi + 1.778rem, 4.3rem);
  --msu-text-8xl: clamp(2.887rem, 4.133vi + 1.853rem, 5.16rem);
  --msu-text-9xl: clamp(3.247rem, 5.353vi + 1.909rem, 6.192rem);
  --msu-text-10xl: clamp(3.653rem, 6.867vi + 1.936rem, 7.43rem);

  --msu-display1: 500 var(--msu-text-10xl) var(--msu-open-sans); /* 57.33px */
  --msu-display2: 500 var(--msu-text-9xl) var(--msu-open-sans); /* 47.78px */
  --msu-display3: 500 var(--msu-text-8xl) var(--msu-open-sans); /* 39.81px */
  --msu-display4: 500 var(--msu-text-7xl) var(--msu-open-sans); /* 33.18px */
  --msu-display5: 500 var(--msu-text-6xl) var(--msu-open-sans); /* 27.65px */
  --msu-display6: 500 var(--msu-text-5xl) var(--msu-open-sans); /* 23.04px */
  --msu-heading1: 600 var(--msu-text-4xl) var(--msu-font-display); /* 39.81px */
  --msu-heading2: 500 var(--msu-text-3xl) var(--msu-font-display); /* 33.18px */
  --msu-heading3: 500 var(--msu-text-2xl) var(--msu-font-display); /* 27.65px */
  --msu-heading4: 500 var(--msu-text-xl) var(--msu-font-display); /* 23.04px */
  --msu-heading5: 500 var(--msu-text-lg) var(--msu-font-display); /* 19.20px */
  --msu-heading6: 500 var(--msu-text-md) var(--msu-font-display); /* 16px */
  --msu-paragraph: 500 var(--msu-text-md) var(--msu-open-sans); /* 16px */
  --msu-small: 500 var(--msu-text-sm) var(--msu-open-sans); /* 13.33px */
  --msu-tiny: 500 var(--msu-text-xs) var(--msu-open-sans); /* 11.11px */
}

/* Small (sm) Breakpoint */
@media (min-width: 576px) {
  :root {

  }
}

/* Medium (md) Breakpoint */
@media (min-width: 768px) {
  :root {
    --msu-grid-col-count: 12;
  }
}

/* Large (lg) Breakpoint */
@media (min-width: 992px) {
  :root {
    --msu-gap: 1.5rem; /* 24px, larger gap on larger screens */
    /* 16 column grid */
    /* full-bleed | breakout | content | breakout | full-bleed */
    /* content max-width: 1320px / 82.5rem */
    /* gutters on each side: 24px * 2 = 48px */
    /* inner content grid: 12 columns, 88px wide/ea. */
    --msu-grid:
      [full-width-start] minmax(var(--msu-grid-padding-inline), 1fr) [breakout-start wide-start] minmax(0, var(--msu-breakout-size)) [content-start] repeat(var(--msu-grid-col-count), minmax(0, 88px)) [content-end] minmax(0, var(--msu-breakout-size)) [breakout-end wide-end] minmax(var(--msu-grid-padding-inline), 1fr) [full-width-end];
    /* --msu-grid:
      [full-width-start] minmax(var(--msu-grid-padding-inline), 1fr) [breakout-start wide-start] minmax(0, var(--msu-breakout-size)) [content-start] repeat(var(--msu-grid-col-count), calc((min(100% - var(--msu-gap), 1320px) - 11 * var(--msu-gap)) / 12)) [content-end] minmax(0, var(--msu-breakout-size)) [breakout-end wide-end] minmax(var(--msu-grid-padding-inline), 1fr) [full-width-end]; */
    /* --msu-grid:
      [full-width-start] minmax(var(--msu-grid-padding-inline), 1fr) [breakout-start wide-start] minmax(0, var(--msu-breakout-size)) [content-start] repeat(12, 1fr) [content-end] minmax(0, var(--msu-breakout-size)) [breakout-end wide-end] minmax(var(--msu-grid-padding-inline), 1fr) [full-width-end]; */

    /* --msu-grid:
      [full-width-start full-bleed-start] 1fr [breakout-start wide-start] minmax(0, var(--msu-breakout-size)) [content-start] repeat(12, calc((min(100% - 48px, 82.5rem) - 11 * 24px) / 12)) [content-end] minmax(0, var(--msu-breakout-size)) [wide-end breakout-end] 1fr [full-bleed-end full-width-end]; */
    /* --msu-grid: 1fr repeat(12, calc((min(100% - 40px, 60rem) - 11 * 30px) / 12)) 1fr; */
    /* --msu-gap: 30px; */
  }
}

/* X-Large (xl) Breakpoint */
@media (min-width: 1200px) {
  :root {

  }
}

/* 2X-Large (xxl) Breakpoint */
@media (min-width: 1400px) {
  :root {

  }
}

/* Light Mode, or no preference set */
/* @media (prefers-color-scheme: light) { */
  :root {
    /* Text Colors */
    /* --msu-text-primary: var(--msu-black); */
    /* --msu-text-secondary: rgb(0 0 0 / .8); */
    --msu-text-primary: var(--msu-maroon);
    --msu-text-secondary: var(--msu-white);
    --msu-text-maroon: var(--msu-maroon);
    --msu-text-white: var(--msu-white);

    /* Background Colors */
    --msu-bg-primary: var(--msu-white);
    --msu-bg-primary-inverse: var(--msu-black);
    --msu-bg-secondary: #eee;
    --msu-bg-white: var(--msu-white);
    --msu-bg-maroon: var(--msu-maroon);
    --msu-bg-black: var(--msu-black);

    /* Foreground Colors */
    --msu-fg-primary: var(--msu-black);

    /* Links */
    --msu-link-color: var(--msu-maroon);
    --msu-text-decoration: underline;
    --msu-text-decoration-thickness: max(0.08em, 1px);
    --msu-text-underline-offset: 0.15em;
  }
/* } */

/* Dark Mode */
/* @media (prefers-color-scheme: dark) { */
  /* :root { */
    /* Text Colors */
    /* --msu-text-primary: var(--msu-white); */
    /* --msu-text-secondary: rgb(255 255 255 / .8); */
    /* --msu-text-maroon: var(--msu-maroon); */

    /* Background Colors */
    /* --msu-bg-primary: var(--msu-black);
    --msu-bg-primary-inverse: var(--msu-white);
    --msu-bg-secondary: #030303;
    --msu-bg-white: var(--msu-white);
    --msu-bg-maroon: var(--msu-maroon);
    --msu-bg-black: var(--msu-black); */

    /* Foreground Colors */
    /* --msu-fg-primary: var(--msu-white); */

    /* Links */
    /* --msu-link-color: var(--msu-maroon); */
  /* } */
/* } */