@layer reset, tokens, base, layout, components;

/* Onest and Syncopate, self-hosted (same files as summitflow.li) */
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('../fonts/gNMKW3F-SZuj7xmf-HY.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: 'Onest';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('../fonts/gNMKW3F-SZuj7xmR-HY6EQ.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, 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;
}
@font-face {
  font-family: 'Syncopate';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/pe0pMIuPIYBCpEV5eFdKvtKqBP5v.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+FEFF, U+FFFD;
}

@layer reset {
  * { box-sizing: border-box; margin: 0; padding: 0; }
  body { font-family: system-ui, -apple-system, sans-serif; line-height: 1.5; }
}

@layer tokens {
  :root {
    color-scheme: light dark;

    /* Summitflow brand (tokens copied from SummitPace) */
    --c-primary:        oklch(0.25 0.06 220);   /* Deep Teal #00344C */
    --c-primary-dark:   oklch(0.18 0.05 220);
    --c-secondary:      oklch(0.72 0.08 220);   /* #6EC1E4 */
    --c-highlight:      oklch(0.87 0.19 100);   /* #DDDB00, product accent of SummitBib */
    --c-success:        oklch(0.60 0.19 128);   /* Power Green, success messages only */
    --c-danger:         oklch(0.55 0.20 25);

    /* Light and dark values */
    --c-bg:             light-dark(oklch(0.985 0.003 220), oklch(0.17 0.03 220));
    --c-surface:        light-dark(#fff, oklch(0.22 0.035 220));
    --c-surface-alt:    light-dark(oklch(0.955 0.008 220), oklch(0.26 0.04 220));
    --c-text:           light-dark(oklch(0.18 0.03 220), oklch(0.95 0.01 220));
    --c-text-muted:     light-dark(oklch(0.45 0.03 220), oklch(0.75 0.02 220));
    --c-border:         light-dark(oklch(0.88 0.015 220), oklch(0.35 0.03 220));
    --c-link:           light-dark(oklch(0.38 0.08 220), oklch(0.80 0.09 220));
    /* Yellow is never a text colour on a light background */
    --c-accent-text:    light-dark(oklch(0.25 0.06 220), oklch(0.87 0.19 100));

    --font:             'Onest', system-ui, -apple-system, sans-serif;
    --font-display:     'Syncopate', 'Onest', sans-serif;

    --fs-sm:   clamp(0.875rem, 1.5vw, 0.95rem);
    --fs-base: clamp(1rem, 1.8vw, 1.1rem);
    --fs-lg:   clamp(1.125rem, 2vw, 1.25rem);
    --fs-xl:   clamp(1.25rem, 2.5vw, 1.5rem);
    --fs-hero: clamp(1.6rem, 3.5vw, 2.6rem);

    --sp-xs: 0.5rem;
    --sp-sm: 0.75rem;
    --sp-md: 1rem;
    --sp-lg: 1.5rem;
    --sp-xl: 2rem;
    --sp-2xl: 3rem;

    --r-sm: 0.5rem;
    --r-md: 0.875rem;
    --r-full: 9999px;

    --container-max: 60rem;
  }
}

@layer base {
  body {
    font-family: var(--font);
    font-size: var(--fs-base);
    background: var(--c-bg);
    color: var(--c-text);
  }
  h1, h2, h3 { line-height: 1.2; text-wrap: balance; }
  h1 { font-family: var(--font-display); font-size: var(--fs-hero); letter-spacing: 0.02em; }
  h2 { font-size: var(--fs-xl); }
  h3 { font-size: var(--fs-lg); }
  p, li, dd { text-wrap: pretty; }
  a { color: var(--c-link); text-underline-offset: 0.15em; }
  :focus-visible { outline: 3px solid var(--c-secondary); outline-offset: 2px; }
  @media (prefers-reduced-motion: no-preference) {
    @view-transition { navigation: auto; }
  }
}

@layer layout {
  .skip-link {
    position: absolute;
    inset-inline-start: var(--sp-md);
    inset-block-start: -10rem;
    background: var(--c-surface);
    padding: var(--sp-xs) var(--sp-md);
    &:focus { inset-block-start: var(--sp-md); }
  }
  .site-header {
    background: var(--c-primary);
    color: #fff;
    padding-block: var(--sp-sm);
    & .container { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-md); }
    & a { color: #fff; }
  }
  .brand {
    display: flex;
    align-items: center;
    gap: var(--sp-sm);
    text-decoration: none;
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: 0.05em;
    & img { block-size: 2.25rem; inline-size: auto; }
  }
  .container {
    inline-size: min(100% - 2 * var(--sp-md), var(--container-max));
    margin-inline: auto;
  }
  main {
    display: grid;
    gap: var(--sp-2xl);
    padding-block: var(--sp-xl) var(--sp-2xl);
  }
  section { display: grid; gap: var(--sp-md); }
  section + section { content-visibility: auto; contain-intrinsic-size: auto 30rem; }
  .site-footer {
    border-block-start: 1px solid var(--c-border);
    padding-block: var(--sp-xl);
    color: var(--c-text-muted);
    font-size: var(--fs-sm);
    & nav ul { display: flex; flex-wrap: wrap; gap: var(--sp-md); list-style: none; }
  }
}

@layer components {
  .answer {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-inline-start: 0.5rem solid var(--c-highlight);
    border-radius: var(--r-md);
    padding: var(--sp-lg);
    display: grid;
    gap: var(--sp-sm);
  }
  .status {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-xs);
    inline-size: fit-content;
    background: var(--c-highlight);
    color: var(--c-primary);
    font-weight: 700;
    padding: 0.2rem var(--sp-sm);
    border-radius: var(--r-full);
  }
  .meta { color: var(--c-text-muted); font-size: var(--fs-sm); }
  .unverified {
    font-size: var(--fs-sm);
    color: var(--c-text-muted);
    border: 1px dashed var(--c-border);
    border-radius: var(--r-sm);
    padding: 0 var(--sp-xs);
    white-space: nowrap;
  }
  .paths {
    display: grid;
    gap: var(--sp-md);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
    list-style: none;
  }
  .path {
    container-type: inline-size;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    padding: var(--sp-md);
    display: grid;
    gap: var(--sp-xs);
    align-content: start;
    contain: layout style paint;
    &:has(.impossible) { background: var(--c-surface-alt); }
  }
  .impossible { color: var(--c-text-muted); }
  .facts {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: var(--sp-xs) var(--sp-lg);
    & dt { font-weight: 600; }
  }
  details {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    padding: var(--sp-md);
    & summary { cursor: pointer; font-weight: 600; }
    & > p { margin-block-start: var(--sp-sm); }
  }
  .waitlist {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    padding: var(--sp-lg);
    display: grid;
    gap: var(--sp-md);
    & fieldset { border: 0; display: grid; gap: var(--sp-xs); }
    & legend { font-weight: 600; margin-block-end: var(--sp-xs); }
    & label { display: flex; gap: var(--sp-xs); align-items: baseline; }
    & .field { display: grid; gap: var(--sp-xs); }
    & input[type="email"], & input[type="number"], & select {
      font: inherit;
      padding: var(--sp-xs) var(--sp-sm);
      border: 1px solid var(--c-border);
      border-radius: var(--r-sm);
      background: var(--c-bg);
      color: var(--c-text);
      max-inline-size: 28rem;
    }
    & input[type="number"] { inline-size: 6rem; }
    & .amount { display: flex; gap: var(--sp-xs); align-items: baseline; }
    & .trap { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); }
  }
  .message { color: var(--c-danger); font-weight: 600; }
  .notice { display: grid; gap: var(--sp-md); max-inline-size: 45rem; margin-block-end: var(--sp-lg); }
  .button {
    font: inherit;
    font-weight: 700;
    inline-size: fit-content;
    background: var(--c-highlight);
    color: var(--c-primary);
    border: 0;
    border-radius: var(--r-full);
    padding: var(--sp-sm) var(--sp-xl);
    cursor: pointer;
    text-decoration: none;
    &:hover { filter: brightness(0.95); }
  }
  .independence { font-size: var(--fs-sm); color: var(--c-text-muted); }
  .languages { display: flex; gap: var(--sp-sm); list-style: none; }
  .legal { display: grid; gap: var(--sp-md); max-inline-size: 45rem; & ul { padding-inline-start: var(--sp-lg); } }
  .home-races { display: flex; flex-wrap: wrap; gap: var(--sp-md); list-style: none; }
}