/*
 * Shared foundations: cascade layers, the font, design tokens, and a reset.
 *
 * The layer order is declared once, up front, so import order can never decide
 * which rule wins. This was the whole point of the vanilla-extract setup and
 * it survives the move to plain CSS unchanged -- @layer is a CSS feature, not
 * a build-tool one.
 */
@layer sl-reset, sl-base, sl-components, sl-utilities;

/*
 * Geist, Latin subset only.
 *
 * Declared by hand rather than by importing the fontsource stylesheet, which
 * would pull in Cyrillic, Vietnamese and Latin-ext as well -- extra network
 * requests for pages whose text is a handful of English words.
 */
@font-face {
  font-family: 'Geist Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('./fonts/geist-latin-wght-normal.woff2') format('woff2-variations');
  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;
}

@layer sl-base {
  :root {
    --font-geist-sans: 'Geist Variable';
    /* No matching @font-face: the mono stack exists for the design system's
       code styles and falls through to the system monospace here. */
    --font-geist-mono: 'Geist Mono Variable';

    --sl-font-sans: var(--font-geist-sans), ui-sans-serif, system-ui, -apple-system,
      'Segoe UI', sans-serif;
    --sl-font-mono: var(--font-geist-mono), ui-monospace, 'SF Mono', Menlo, monospace;

    --sl-space-1: 0.25rem;
    --sl-space-2: 0.5rem;
    --sl-space-3: 0.75rem;
    --sl-space-4: 1rem;
    --sl-space-5: 1.25rem;
    --sl-space-6: 1.5rem;
    --sl-space-8: 2rem;
    --sl-space-10: 2.5rem;
    --sl-space-12: 3rem;
    --sl-space-16: 4rem;

    --sl-text-xs: 0.75rem;
    --sl-text-sm: 0.875rem;
    --sl-text-base: 1rem;
    --sl-text-lg: 1.125rem;
    --sl-text-xl: 1.25rem;
    --sl-text-2xl: 1.5rem;

    --sl-leading-tight: 1.25;
    --sl-leading-normal: 1.5;
    --sl-leading-relaxed: 1.7;

    --sl-radius-sm: 0.25rem;
    --sl-radius-md: 0.375rem;
    --sl-radius-lg: 0.625rem;
    --sl-radius-full: 9999px;

    --sl-color-background: oklch(1 0 0);
    --sl-color-foreground: oklch(0.145 0 0);
    --sl-color-card: oklch(1 0 0);
    --sl-color-muted: oklch(0.97 0 0);
    --sl-color-muted-foreground: oklch(0.556 0 0);
    --sl-color-border: oklch(0.922 0 0);
    --sl-color-ring: oklch(0.708 0 0);
  }

  /*
   * Dark palette. The prototypes that pin themselves to light (squishy-matter
   * does -- the orange-on-white outline is the artwork and it does not invert)
   * simply never opt in; the hub follows the system.
   */
  @media (prefers-color-scheme: dark) {
    :root:not(.light) {
      --sl-color-background: oklch(0.145 0 0);
      --sl-color-foreground: oklch(0.985 0 0);
      --sl-color-card: oklch(0.205 0 0);
      --sl-color-muted: oklch(0.269 0 0);
      --sl-color-muted-foreground: oklch(0.708 0 0);
      --sl-color-border: oklch(1 0 0 / 12%);
      --sl-color-ring: oklch(0.556 0 0);
    }
  }
}

@layer sl-reset {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
    border-width: 0;
    border-style: solid;
    border-color: var(--sl-color-border);
  }

  html {
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
  }

  body,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  p,
  figure,
  blockquote,
  dl,
  dd,
  pre {
    margin: 0;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-size: inherit;
    font-weight: inherit;
  }

  a {
    color: inherit;
    text-decoration: inherit;
  }

  ol,
  ul,
  menu {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  img,
  svg,
  video,
  canvas,
  audio,
  iframe,
  embed,
  object {
    display: block;
    vertical-align: middle;
  }

  img,
  video {
    max-width: 100%;
    height: auto;
  }

  button,
  input,
  optgroup,
  select,
  textarea {
    font: inherit;
    color: inherit;
    letter-spacing: inherit;
    background: transparent;
    border-radius: 0;
    padding: 0;
    margin: 0;
  }

  button,
  [role='button'] {
    cursor: pointer;
  }

  :disabled {
    cursor: default;
  }

  ::placeholder {
    opacity: 1;
    color: var(--sl-color-muted-foreground);
  }

  code,
  kbd,
  samp,
  pre {
    font-family: var(--sl-font-mono);
    font-size: 1em;
  }
}

@layer sl-base {
  body {
    min-height: 100dvh;
    background-color: var(--sl-color-background);
    color: var(--sl-color-foreground);
    font-family: var(--sl-font-sans);
    font-size: var(--sl-text-base);
    line-height: var(--sl-leading-normal);
    -webkit-font-smoothing: antialiased;
  }

  :focus-visible {
    outline: 2px solid var(--sl-color-ring);
    outline-offset: 2px;
  }
}