@import './shared/a11y.css';
@import './shared/buttons.css';
@import './shared/forms.css';
@import './shared/sort-by.css';
@import './shared/typography.css';

@import '@fontsource/fira-sans/300.css';
@import '@fontsource/fira-sans/400.css';
@import '@fontsource/fira-sans/400-italic.css';
@import '@fontsource/fira-sans/500.css';
@import '@fontsource/fira-sans/600.css';
@import '@fontsource/fira-sans/700.css';
@import '@fontsource/fira-mono/400.css';
@import '@fontsource/fira-mono/700.css';

/*
 * The `normalize.css` file does not use CSS layers, so we need to vendor it
 * with a layer to ensure it is applied before our global styles.
 */
@import './normalize.css';

@layer global {
  :root {
    --violet800: hsl(252, 44%, 24%);
    --grey900: hsl(200, 15%, 19%);
    --grey700: hsl(200, 11%, 43%);
    --grey600: hsl(200, 13%, 60%);
    --grey200: hsl(200, 17%, 96%);
    --green800: hsl(115, 31%, 31%);
    --green900: hsl(115, 31%, 21%);

    --orange-50: #fff7ed;
    --orange-100: #ffedd5;
    --orange-200: #fed7aa;
    --orange-300: #fdba74;
    --orange-400: #fb923c;
    --orange-500: #f97316;
    --orange-600: #ea580c;
    --orange-700: #c2410c;
    --orange-800: #9a3412;
    --orange-900: #7c2d12;

    --yellow100: hsl(44, 100%, 90%);
    --yellow500: hsl(44, 100%, 60%);
    --yellow700: hsl(44, 67%, 50%);
    --yellow800: hsl(44, 67%, 20%);
    --yellow900: hsl(44, 30%, 23%);

    --header-bg-color: light-dark(hsl(115, 31%, 20%), #141413);

    --transition-x-slow: 1000ms;
    --transition-slow: 500ms;
    --transition-medium: 250ms;
    --transition-fast: 150ms;
    --transition-x-fast: 50ms;
    --transition-instant: 0ms;

    --font-heading: 'Fira Sans', sans-serif;
    --font-body: var(--font-heading);
    --font-monospace:
      'Fira Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;

    --main-color: light-dark(#383838, #f9f7ec);
    --main-color-light: light-dark(#858585, #a6a6a6);
    --main-shadow-color: light-dark(var(--green900), hsl(111, 10%, 8%));
    --main-bg: light-dark(#f9f7ec, hsl(0, 1%, 19%));
    --main-bg-dark: light-dark(#edebdd, #141413);
    --gray-border: light-dark(#d5d3cb, #666561);
    --link-color: light-dark(#00ac5b, #04da75);
    --link-hover-color: light-dark(#007940, #00f27f);

    --placeholder-bg: hsl(212, 7%, 57%);
    --placeholder-bg2: hsl(213, 16%, 75%);

    /* see https://utopia.fyi/space/calculator?c=320,14,1.2,1140,18,1.25,5,2,&s=0.75|0.5|0.25|0.125,1.5|2|3|4|6,s-l */

    --space-4xs: clamp(0.13rem, calc(0.13rem + 0vw), 0.13rem);
    --space-3xs: clamp(0.25rem, calc(0.23rem + 0.12vw), 0.31rem);
    --space-2xs: clamp(0.44rem, calc(0.39rem + 0.24vw), 0.56rem);
    --space-xs: clamp(0.69rem, calc(0.61rem + 0.37vw), 0.88rem);
    --space-s: clamp(0.88rem, calc(0.78rem + 0.49vw), 1.13rem);
    --space-m: clamp(1.31rem, calc(1.17rem + 0.73vw), 1.69rem);
    --space-l: clamp(1.75rem, calc(1.55rem + 0.98vw), 2.25rem);
    --space-xl: clamp(2.63rem, calc(2.33rem + 1.46vw), 3.38rem);
    --space-2xl: clamp(3.5rem, calc(3.11rem + 1.95vw), 4.5rem);
    --space-3xl: clamp(5.25rem, calc(4.66rem + 2.93vw), 6.75rem);

    /* One-up pairs */
    --space-4xs-3xs: clamp(0.13rem, calc(0.05rem + 0.37vw), 0.31rem);
    --space-3xs-2xs: clamp(0.25rem, calc(0.13rem + 0.61vw), 0.56rem);
    --space-2xs-xs: clamp(0.44rem, calc(0.27rem + 0.85vw), 0.88rem);
    --space-xs-s: clamp(0.69rem, calc(0.52rem + 0.85vw), 1.13rem);
    --space-s-m: clamp(0.88rem, calc(0.56rem + 1.59vw), 1.69rem);
    --space-m-l: clamp(1.31rem, calc(0.95rem + 1.83vw), 2.25rem);
    --space-l-xl: clamp(1.75rem, calc(1.12rem + 3.17vw), 3.38rem);
    --space-xl-2xl: clamp(2.63rem, calc(1.89rem + 3.66vw), 4.5rem);
    --space-2xl-3xl: clamp(3.5rem, calc(2.23rem + 6.34vw), 6.75rem);

    /* Custom pairs */
    --space-s-l: clamp(0.88rem, calc(0.34rem + 2.68vw), 2.25rem);

    color-scheme: light dark;
  }

  [data-color-scheme='light'] {
    color-scheme: light;
  }

  [data-color-scheme='dark'] {
    color-scheme: dark;
  }

  * {
    box-sizing: border-box;
  }

  html,
  body {
    margin: 0;
  }

  body {
    background-color: var(--header-bg-color);
    font-family: var(--font-body);
    font-size: 16px;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
  }

  h1,
  h2,
  h3,
  h4 {
    font-family: var(--font-heading);
  }

  h1 {
    @media only screen and (max-width: 400px) {
      font-size: 1.5em;
    }
  }

  a,
  .link,
  .text--link {
    color: var(--link-color);
    text-decoration: none;
    cursor: pointer;

    &:hover {
      color: var(--link-hover-color);
    }
  }

  /* Using `:not(...)` here for specificity reasons */
  a:not([href]) {
    color: unset;
    cursor: initial;
  }

  pre.terminal {
    background: var(--main-color);
    color: white;
    padding: var(--space-s);
    font-family: var(--font-monospace);
  }

  abbr[title] {
    text-decoration: none;
    border-bottom: 1px dotted;
  }

  noscript {
    display: grid;
    justify-items: center;
    padding: var(--space-m);
    color: white;
  }

  /* see https://github.com/twbs/bootstrap/pull/30269 */
  ::-webkit-datetime-edit,
  ::-webkit-datetime-edit-fields-wrapper,
  ::-webkit-datetime-edit-text,
  ::-webkit-datetime-edit-minute,
  ::-webkit-datetime-edit-hour-field,
  ::-webkit-datetime-edit-day-field,
  ::-webkit-datetime-edit-month-field,
  ::-webkit-datetime-edit-year-field {
    padding: 0;
  }

  ::-webkit-calendar-picker-indicator {
    font-size: 0.9em;
  }

  .width-limit {
    width: 960px;
    @media only screen and (max-width: 960px) {
      width: 100%;
    }
  }
}
