/* ==========================================================================
   Base
   Font loading, element defaults, typography styles and accessibility
   helpers shared by the whole site.
   ========================================================================== */

/* Inter variable (wght 100–900), latin subset, from Google Fonts.
   The optical size axis is not included: the Figma design renders Inter
   at its fixed text optical size, which this file matches. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../assets/fonts/inter/inter-variable-latin.woff2") format("woff2");
}

@layer base {
  html {
    color-scheme: dark;
  }

  @media (prefers-reduced-motion: no-preference) {
    html {
      scroll-behavior: smooth;
    }
  }

  /* Figma "text" style is the default body style. */
  body {
    background-color: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-family-base);
    font-size: var(--font-size-text);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-text);
  }

  /* Headings carry no visual style of their own: the heading level follows
     the document outline, the typography classes below set the look. */
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
  }

  /* Figma "Links" style */
  a {
    color: var(--color-accent);
    text-decoration: none;
  }

  /* ------------------------------------------------------------------------
     Typography styles — one class per Figma text style
     ------------------------------------------------------------------------ */
  .text-h1 {
    font-size: var(--font-size-h1);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-h1);
  }

  .text-h2 {
    font-size: var(--font-size-h2);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-h2);
  }

  .text-large {
    font-size: var(--font-size-large);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-large);
  }

  .text-large-bold {
    font-size: var(--font-size-large);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-large);
  }

  .text-bold {
    font-size: var(--font-size-text);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-text-bold);
  }

  .text-subtle {
    font-size: var(--font-size-subtle);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-subtle);
  }

  /* ------------------------------------------------------------------------
     Accessibility
     ------------------------------------------------------------------------ */
  :focus-visible {
    outline: var(--focus-outline);
    outline-offset: var(--focus-outline-offset);
  }

  /* Not part of the Figma design: hidden until it receives keyboard focus. */
  .skip-link {
    position: absolute;
    inset-block-start: 1rem;
    inset-inline-start: 1rem;
    z-index: var(--z-skip-link);
    padding: 0.5rem 1rem;
    border-radius: var(--radius-button);
    background-color: var(--color-text);
    color: var(--color-bg);
  }

  .skip-link:not(:focus) {
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}