/*
  Hamburg Space Team site styles

  This file is loaded after the TailBliss/Tailwind stylesheet, so variables and
  rules here override the theme without editing the theme submodule.
*/

@font-face { 
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("/fonts/space-grotesk-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("/fonts/space-grotesk-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}

:root,
:host {
  /* Typography used in both light and dark mode. */
  --font-sans: "Space Grotesk", ui-sans-serif, system-ui, -apple-system,
    BlinkMacSystemFont, "Segoe UI", sans-serif;
  --default-font-family: var(--font-sans);

  /* --- Brand palette --- */
  --color-orange: hsl(10, 100%, 50%);
  
  /*HANS patch colors*/
  --color-mint: #78ffb2; 
  --color-magenta: #ff78e2;
  --color-cyan: #29ebff;

  /*EOS patch colors */
  --color-yellow: #fcc77dff; 
  --color-red: #e2224aff;
  --color-blue-light: #418bc8ff;
  --color-blue-light-light: #9db2efff;
  --color-blue-dark: #0d4e7dff;
  --color-blue-dark-dark: #002238ff;
  --color-grey: #999999ff;
  --color-grey-dark: #616161ff;

  /* --- Shuttle Background gradient colors --- */
  --color-navy: hsl(212, 34%, 20%); 
  --color-navy-dark: hsl(216, 32%, 10%);
  --color-space: hsl(220, 30%, 7%); /*goood almost-black*/
  --color-blue: hsl(220, 34%, 40%);
  --color-sky: hsl(210, 36%, 70%);
  --color-ice: hsl(208, 34%, 80%);
  --color-cloud: hsl(206, 32%, 85%); /*good light mode background*/
  --color-copper: hsl(25, 51%, 58%); /*good highlight color*/
  --color-brown: hsl(22, 70%, 50%);

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

  /* Layout widths. */
  --content-max-width: 80rem;
  --content-inner-width: 70rem;
  --content-small-width: 56rem;
  --content-desktop-gutter: 2rem;

  /* Light-mode surface and text colors. */
  --color-background: var(--color-cloud);
  --color-background-gradient-top: var(--color-sky);
  --color-background-gradient-bottom: var(--color-cloud);
  --color-surface: var(--color-white);
  --color-surface-soft: var(--color-ice);
  --color-text: var(--color-space);
  --color-text-muted: var(--color-navy);
  --color-border: var(--color-navy);

  /* TailBliss/Tailwind compatibility aliases for light mode. */
  --color-primary-100: var(--color-blue-light);
  --color-primary-200: var(--color-ice);
  --color-primary-300: var(--color-sky);
  --color-primary-400: var(--color-blue-dark);
  --color-primary-500: var(--color-blue-dark);
  --color-primary-600: var(--color-navy);
  --color-primary-700: var(--color-blue-dark-dark);
  --color-primary-800: var(--color-space);
  --color-primary-900: var(--color-text);

  --color-indigo-300: var(--color-primary-300);
  --color-indigo-400: var(--color-sky);
  --color-indigo-500: var(--color-blue);
  --color-indigo-600: var(--color-navy);
  --color-indigo-700: var(--color-space);
  --color-indigo-800: var(--color-black);
}

.dark {
  /* Dark-mode surface and text colors. */
  --color-background: var(--color-navy-dark);
  --color-background-gradient-top: var(--color-space);
  --color-background-gradient-bottom: var(--color-blue-dark);
  --color-surface: var(--color-blue);
  --color-surface-soft: var(--color-navy);
  --color-text: var(--color-white);
  --color-text-muted: var(--color-sky);
  --color-border: var(--color-sky);

  /* TailBliss/Tailwind compatibility aliases for dark mode. */
  --color-primary-100: var(--color-copper);
  --color-primary-200: var(--color-ice);
  --color-primary-300: var(--color-sky);
  --color-primary-400: var(--color-copper);
  --color-primary-500: var(--color-copper);
  --color-primary-600: var(--color-copper);
  --color-primary-700: var(--color-brown);
  --color-primary-800: var(--color-space);
  --color-primary-900: var(--color-space);

  --color-indigo-300: var(--color-primary-300);
  --color-indigo-400: var(--color-sky);
  --color-indigo-500: var(--color-navy);
  --color-indigo-600: var(--color-navy-dark);
  --color-indigo-700: var(--color-space);
  --color-indigo-800: var(--color-black);
}

body {
  font-family: var(--default-font-family);
  color: var(--color-text);
  background:
    linear-gradient(
      180deg,
      var(--color-background-gradient-top) 0%,
      var(--color-background-gradient-bottom) 120%
    );
  background-attachment: scroll;
  background-color: var(--color-background);
}