@import 'tailwindcss';
@import './styles/theme.css';

/* ------------------------------------------------------------------------- */
/* Base                                                                       */
/* ------------------------------------------------------------------------- */

@layer base {
  *,
  *::before,
  *::after {
    border-color: var(--border-subtle);
  }

  html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
  }

  /*
   * Honour a reduced-motion preference globally rather than per component, so
   * an animation added later cannot forget to opt in.
   */
  @media (prefers-reduced-motion: reduce) {
    html {
      scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
    }
  }

  body {
    background-color: var(--canvas);
    color: var(--text-primary);
    font-family: var(--font-sans);
    font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
  }

  /* Headings are tightened; body copy is not. */
  h1,
  h2,
  h3,
  h4 {
    font-weight: 600;
    letter-spacing: -0.017em;
    color: var(--text-primary);
    text-wrap: balance;
  }

  p {
    text-wrap: pretty;
  }

  /*
   * Every focusable element gets the same visible ring. Focus visibility is an
   * accessibility requirement, and on a marketplace where a mis-click can
   * submit an offer, knowing what is focused is a safety property too.
   */
  :focus-visible {
    outline: 2px solid var(--ring);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
  }

  :focus:not(:focus-visible) {
    outline: none;
  }

  /* Prices and other figures must align column-to-column. */
  [data-numeric] {
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum';
  }

  ::selection {
    background-color: var(--accent-soft);
    color: var(--text-accent);
  }

  /* Scrollbars, themed rather than left to the browser default. */
  @supports selector(::-webkit-scrollbar) {
    ::-webkit-scrollbar {
      width: 10px;
      height: 10px;
    }

    ::-webkit-scrollbar-track {
      background: transparent;
    }

    ::-webkit-scrollbar-thumb {
      background-color: var(--border-strong);
      border: 2px solid transparent;
      border-radius: 9999px;
      background-clip: content-box;
    }

    ::-webkit-scrollbar-thumb:hover {
      background-color: var(--text-muted);
    }
  }
}

/* ------------------------------------------------------------------------- */
/* Components                                                                 */
/* ------------------------------------------------------------------------- */

@layer components {
  /*
   * Glass. Deliberately one utility rather than a set of variants: the brief
   * warns against overusing it, and a single definition makes overuse visible
   * in review.
   */
  .glass {
    background-color: var(--surface-glass);

    /*
     * Saturation is lifted along with the blur because blurring alone washes
     * colour out. Whatever passes underneath should tint the surface -- that
     * tinting is the effect; the blur on its own is just a frosted grey.
     */
    backdrop-filter: blur(var(--blur-glass)) saturate(180%);
    -webkit-backdrop-filter: blur(var(--blur-glass)) saturate(180%);

    /*
     * The lit top edge, drawn inside the box so it needs no extra element and
     * cannot shift layout. Paired with a shadow cast downward onto the content
     * below, which is what separates a pane floating above the page from a strip
     * painted onto it.
     */
    box-shadow:
      inset 0 1px 0 0 var(--glass-edge),
      0 10px 30px -12px var(--shadow-color-glass);
  }

  /*
   * Fallback for browsers without backdrop-filter.
   *
   * Goes fully opaque rather than keeping the translucency: with nothing
   * blurring the content behind it, a 60%-opaque bar leaves headings legibly
   * showing straight through the navigation.
   */
  @supports not (backdrop-filter: blur(1px)) {
    .glass {
      background-color: var(--surface);
    }
  }

  /* Hairline separator that survives fractional device pixel ratios. */
  .hairline {
    box-shadow: inset 0 -1px 0 0 var(--border-subtle);
  }
}

/* ------------------------------------------------------------------------- */
/* Utilities                                                                  */
/* ------------------------------------------------------------------------- */

@layer utilities {
  /* Content column. Matches the responsive widths the brief calls out. */
  .container-page {
    width: 100%;
    margin-inline: auto;
    padding-inline: 1rem;
    max-width: 90rem;
  }

  @media (min-width: 768px) {
    .container-page {
      padding-inline: 1.5rem;
    }
  }

  @media (min-width: 1280px) {
    .container-page {
      padding-inline: 2rem;
    }
  }

  /* Visible only to assistive technology. */
  .sr-only-focusable:not(:focus):not(:focus-within) {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}
