goose/documentation/src/pages/recipes/styles/main.css

@tailwind base;
@tailwind components;
@tailwind utilities;

@font-face {
  font-family: Cash Sans;
  src: url(https://cash-f.squarecdn.com/static/fonts/cashsans/woff2/CashSans-Regular.woff2)
    format("woff2");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: Cash Sans;
  src: url(https://cash-f.squarecdn.com/static/fonts/cashsans/woff2/CashSans-Medium.woff2)
    format("woff2");
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: Cash Sans;
  src: url(https://cash-f.squarecdn.com/static/fonts/cashsans/woff2/CashSans-Semibold.woff2)
    format("woff2");
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: Cash Sans;
  src: url(https://cash-f.squarecdn.com/static/fonts/cashsans/woff2/CashSans-Bold.woff2)
    format("woff2");
  font-weight: 700;
  font-style: normal;
}

@layer base {
  :root {
    /* start arcade colors */
    --constant-white: #ffffff;
    --constant-black: #000000;
    --grey-10: #101010;
    --grey-20: #1e1e1e;
    --grey-50: #666666;
    --grey-60: #959595;
    --grey-80: #cccccc;
    --grey-85: #dadada;
    --grey-90: #e8e8e8;
    --grey-95: #f0f0f0;
    --dark-grey-15: #1a1a1a;
    --dark-grey-25: #232323;
    --dark-grey-30: #2a2a2a;
    --dark-grey-40: #333333;
    --dark-grey-45: #595959;
    --dark-grey-60: #878787;
    --dark-grey-90: #e1e1e1;

    --background-app: var(--constant-white);
    --background-prominent: var(--grey-80);
    --background-standard: var(--grey-90);
    --background-subtle: var(--grey-95);

    --border-divider: var(--grey-90);
    --border-inverse: var(--constant-white);
    --border-prominent: var(--grey-10);
    --border-standard: var(--grey-60);
    --border-subtle: var(--grey-90);

    --icon-disabled: var(--grey-60);
    --icon-extra-subtle: var(--grey-60);
    --icon-inverse: var(--constant-white);
    --icon-prominent: var(--grey-10);
    --icon-standard: var(--grey-20);
    --icon-subtle: var(--grey-50);

    --text-placeholder: var(--grey-60);
    --text-prominent: var(--grey-10);
    --text-standard: var(--grey-20);
    --text-subtle: var(--grey-50);

    &.dark {
      --background-app: var(--constant-black);
      --background-prominent: var(--dark-grey-40);
      --background-standard: var(--dark-grey-25);
      --background-subtle: var(--dark-grey-15);

      --border-divider: var(--dark-grey-25);
      --border-inverse: var(--constant-black);
      --border-prominent: var(--constant-white);
      --border-standard: var(--dark-grey-45);
      --border-subtle: var(--dark-grey-25);

      --icon-disabled: var(--dark-grey-45);
      --icon-extra-subtle: var(--dark-grey-45);
      --icon-inverse: var(--constant-black);
      --icon-prominent: var(--constant-white);
      --icon-standard: var(--dark-grey-90);
      --icon-subtle: var(--dark-grey-60);

      --text-placeholder: var(--dark-grey-45);
      --text-prominent: var(--constant-white);
      --text-standard: var(--dark-grey-90);
      --text-subtle: var(--dark-grey-60);
    }
    /* end arcade colors */
  }
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes appear-top {
  0% {
    transform: translateY(-50%);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Command section styles */
.command-toggle {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 0.5rem 0;
  font-size: 0.875rem;
  color: var(--text-standard);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
}

.command-toggle:hover {
  color: var(--text-prominent);
}

.command-toggle h4 {
  font-size: 0.875rem;
  font-weight: 500;
  margin: 0;
}

.command-toggle svg {
  width: 16px;
  height: 16px;
}

.command-content {
  background-color: var(--background-subtle);
  padding: 0.75rem;
  border-radius: 0.375rem;
  font-size: 0.875rem;
  color: var(--text-standard);
  margin-top: 0.5rem;
}

.command-content code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
    "Liberation Mono", "Courier New", monospace;
  font-size: 0.875rem;
  background-color: transparent;
  border: none;
}

/* view transitions */
a.transitioning .home-page-server-name,
.detail-page-server-name {
  view-transition-name: server-name;
}