/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

@font-face {
  font-family: "Caveat";
  src: url("/assets/Caveat-Extended-latin-ext-6218ff86.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, 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: "Caveat";
  src: url("/assets/Caveat-Extended-latin-b424f770.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
  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+2212,
    U+2215;
}

@layer wa-color-palette {
  :where(:root) {
    --wa-color-wr-primary-95: #f0ecd8;
    --wa-color-wr-primary-90: #e9e6c0;
    --wa-color-wr-primary-80: #dddb9b;
    --wa-color-wr-primary-70: #d1d06e;
    --wa-color-wr-primary-60: #c2c00f;
    --wa-color-wr-primary-50: #a5a822;
    --wa-color-wr-primary-40: #838b2a;
    --wa-color-wr-primary-30: #5f6c2c;
    --wa-color-wr-primary-20: #3e502a;
    --wa-color-wr-primary-10: #233825;
    --wa-color-wr-primary-05: #152c22;
    --wa-color-wr-primary: var(--wa-color-wr-primary-60);
    --wa-color-wr-primary-key: 60;
    --wa-color-wr-primary-on: var(--wr-color-brand-black);

    --wa-color-wr-secondary-95: #e4e9e0;
    --wa-color-wr-secondary-90: #cbded4;
    --wa-color-wr-secondary-80: #a4ccc3;
    --wa-color-wr-secondary-70: #77b8af;
    --wa-color-wr-secondary-60: #2ea098;
    --wa-color-wr-secondary-50: #288c85;
    --wa-color-wr-secondary-40: #21756f;
    --wa-color-wr-secondary-30: #1a5d57;
    --wa-color-wr-secondary-20: #134642;
    --wa-color-wr-secondary-10: #0d332f;
    --wa-color-wr-secondary-05: #0a2a26;
    --wa-color-wr-secondary: var(--wa-color-wr-secondary-60);
    --wa-color-wr-secondary-key: 60;
    --wa-color-wr-secondary-on: var(--wr-color-brand-black);
  }
}

@layer wa-color-variant {
  .wa-brand-wr-primary {
    --wa-color-brand-95: var(--wa-color-wr-primary-95);
    --wa-color-brand-90: var(--wa-color-wr-primary-90);
    --wa-color-brand-80: var(--wa-color-wr-primary-80);
    --wa-color-brand-70: var(--wa-color-wr-primary-70);
    --wa-color-brand-60: var(--wa-color-wr-primary-60);
    --wa-color-brand-50: var(--wa-color-wr-primary-50);
    --wa-color-brand-40: var(--wa-color-wr-primary-40);
    --wa-color-brand-30: var(--wa-color-wr-primary-30);
    --wa-color-brand-20: var(--wa-color-wr-primary-20);
    --wa-color-brand-10: var(--wa-color-wr-primary-10);
    --wa-color-brand-05: var(--wa-color-wr-primary-05);
    --wa-color-brand: var(--wa-color-wr-primary);
    --wa-color-brand-on: var(--wa-color-wr-primary-on);
    --wa-color-brand-fill-quiet: var(--wa-color-wr-primary-10);
    --wa-color-brand-fill-normal: var(--wa-color-wr-primary-20);
    --wa-color-brand-fill-loud: var(--wa-color-wr-primary);
    --wa-color-brand-border-quiet: var(--wa-color-wr-primary-20);
    --wa-color-brand-border-normal: var(--wa-color-wr-primary-30);
    --wa-color-brand-border-loud: var(--wa-color-brand-fill-loud);
    --wa-color-brand-on-quiet: var(--wa-color-wr-primary-70);
    --wa-color-brand-on-normal: var(--wa-color-wr-primary-80);
    --wa-color-brand-on-loud: var(--wr-color-brand-black);
  }

  .wa-brand-wr-secondary {
    --wa-color-brand-95: var(--wa-color-wr-secondary-95);
    --wa-color-brand-90: var(--wa-color-wr-secondary-90);
    --wa-color-brand-80: var(--wa-color-wr-secondary-80);
    --wa-color-brand-70: var(--wa-color-wr-secondary-70);
    --wa-color-brand-60: var(--wa-color-wr-secondary-60);
    --wa-color-brand-50: var(--wa-color-wr-secondary-50);
    --wa-color-brand-40: var(--wa-color-wr-secondary-40);
    --wa-color-brand-30: var(--wa-color-wr-secondary-30);
    --wa-color-brand-20: var(--wa-color-wr-secondary-20);
    --wa-color-brand-10: var(--wa-color-wr-secondary-10);
    --wa-color-brand-05: var(--wa-color-wr-secondary-05);
    --wa-color-brand: var(--wa-color-wr-secondary);
    --wa-color-brand-on: var(--wa-color-wr-secondary-on);
    --wa-color-brand-fill-quiet: var(--wa-color-wr-secondary-10);
    --wa-color-brand-fill-normal: var(--wa-color-wr-secondary-20);
    --wa-color-brand-fill-loud: var(--wa-color-wr-secondary);
    --wa-color-brand-border-quiet: var(--wa-color-wr-secondary-20);
    --wa-color-brand-border-normal: var(--wa-color-wr-secondary-30);
    --wa-color-brand-border-loud: var(--wa-color-brand-fill-loud);
    --wa-color-brand-on-quiet: var(--wa-color-wr-secondary-70);
    --wa-color-brand-on-normal: var(--wa-color-wr-secondary-80);
    --wa-color-brand-on-loud: var(--wr-color-brand-black);
  }
}

@layer wa-theme-overrides {
  :where(:root),
  .wa-theme-default {
    --wa-font-family-body: "Inter", ui-sans-serif, system-ui, sans-serif;
    --wa-font-family-heading: "Caveat", var(--wa-font-family-body);
    --wa-font-weight-light: 300;
    --wa-font-weight-normal: 400;
    --wa-font-weight-semibold: 600;
    --wa-font-weight-bold: 700;
    --wa-font-weight-body: var(--wa-font-weight-normal);
    --wa-font-weight-heading: var(--wa-font-weight-bold);
    --wa-font-weight-action: var(--wa-font-weight-semibold);
    --wa-color-brand-95: var(--wa-color-wr-primary-95);
    --wa-color-brand-90: var(--wa-color-wr-primary-90);
    --wa-color-brand-80: var(--wa-color-wr-primary-80);
    --wa-color-brand-70: var(--wa-color-wr-primary-70);
    --wa-color-brand-60: var(--wa-color-wr-primary-60);
    --wa-color-brand-50: var(--wa-color-wr-primary-50);
    --wa-color-brand-40: var(--wa-color-wr-primary-40);
    --wa-color-brand-30: var(--wa-color-wr-primary-30);
    --wa-color-brand-20: var(--wa-color-wr-primary-20);
    --wa-color-brand-10: var(--wa-color-wr-primary-10);
    --wa-color-brand-05: var(--wa-color-wr-primary-05);
    --wa-color-brand: var(--wa-color-wr-primary);
    --wa-color-brand-on: var(--wa-color-wr-primary-on);
    --wa-color-surface-raised: var(--wr-color-surface-raised);
    --wa-color-surface-default: var(--wr-color-surface-default);
    --wa-color-surface-lowered: color-mix(in oklab, var(--wr-color-brand-black) 84%, black);
    --wa-color-surface-border: color-mix(in oklab, var(--wr-color-brand-secondary) 34%, var(--wr-color-brand-black));
    --wa-color-text-normal: var(--wr-color-text-primary);
    --wa-color-text-quiet: var(--wr-color-text-muted);
    --wa-color-text-link: var(--wa-color-wr-secondary-70);
    --wa-color-brand-fill-quiet: var(--wa-color-brand-10);
    --wa-color-brand-fill-normal: var(--wa-color-brand-20);
    --wa-color-brand-fill-loud: var(--wa-color-brand);
    --wa-color-brand-border-quiet: var(--wa-color-brand-20);
    --wa-color-brand-border-normal: var(--wa-color-brand-30);
    --wa-color-brand-on-quiet: var(--wa-color-brand-70);
    --wa-color-brand-on-normal: var(--wa-color-brand-80);
    --wa-color-brand-on-loud: var(--wa-color-brand-on);

    /* Outlined buttons use the loud border token; keep it aligned with accent fills. */
    --wa-color-brand-border-loud: var(--wa-color-brand-fill-loud);
  }
}

:root {
  --wr-site-header-height: 4.5rem;
  --wr-font-family-accent: "Caveat", var(--wa-font-family-body);

  @media (width >= 64rem) {
    --wr-site-header-height: 5rem;
  }
  --wr-color-brand-primary: var(--wa-color-wr-primary);
  --wr-color-brand-primary-light: var(--wa-color-wr-primary-70);
  --wr-color-brand-primary-dark: var(--wa-color-wr-primary-30);
  --wr-color-brand-secondary: var(--wa-color-wr-secondary);
  --wr-color-brand-secondary-light: var(--wa-color-wr-secondary-70);
  --wr-color-brand-secondary-dark: var(--wa-color-wr-secondary-30);
  --wr-color-brand-black: #07211e;
  --wr-color-brand-white: #f4efe6;
  --wr-color-brand-strava: #f26522;
  --wr-color-text-primary: var(--wr-color-brand-white);
  --wr-color-text-muted: color-mix(in oklab, var(--wr-color-brand-white) 58%, var(--wr-color-brand-secondary));
  --wr-color-surface-default: var(--wr-color-brand-black);
  --wr-color-surface-raised: var(--wa-color-wr-secondary-05);
  --wr-color-surface-accent: var(--wa-color-wr-secondary-10);
  --wr-color-surface-inverse: var(--wr-color-brand-white);
}

html {
  background: var(--wr-color-surface-default);
  scrollbar-gutter: stable;
}

.turbo-progress-bar {
  background: var(--wa-color-brand-fill-loud);
}

body {
  min-height: 100dvh;
  margin: 0;
}

.c-text-accent {
  font-family: var(--wr-font-family-accent);
  font-weight: var(--wa-font-weight-normal);
}

.c-dev-page {
  padding: var(--wa-space-l);

  @media (width >= 64rem) {
    padding: var(--wa-space-3xl);
  }
}

.c-paper-section {
  --wr-color-text-primary: var(--wr-color-brand-black);
  --wr-color-text-muted: #687773;
  --wr-color-surface-default: #f6f1e8;
  --wr-color-surface-raised: var(--wr-color-brand-white);
  --wr-color-surface-accent: #ece4d8;
  --wr-color-surface-inverse: var(--wr-color-brand-black);
  --wa-color-surface-raised: var(--wr-color-surface-raised);
  --wa-color-surface-default: var(--wr-color-surface-default);
  --wa-color-surface-lowered: var(--wr-color-surface-accent);
  --wa-color-surface-border: color-mix(in oklab, var(--wr-color-brand-black) 16%, var(--wr-color-surface-accent));
  --wa-color-text-normal: var(--wr-color-text-primary);
  --wa-color-text-quiet: var(--wr-color-text-muted);
  --wa-color-text-link: var(--wa-color-wr-secondary-30);
  --wa-color-brand-fill-quiet: var(--wa-color-wr-primary-95);
  --wa-color-brand-fill-normal: var(--wa-color-wr-primary-90);
  --wa-color-brand-border-quiet: var(--wa-color-wr-primary-90);
  --wa-color-brand-border-normal: var(--wa-color-wr-primary-80);
  --wa-color-brand-on-quiet: var(--wa-color-wr-primary-30);
  --wa-color-brand-on-normal: var(--wa-color-wr-primary-20);
  color: var(--wr-color-text-primary);
  background: var(--wr-color-surface-default);
}

.c-app-shell {
  width: min(100%, 90rem);
  margin-inline: auto;
  background: var(--wr-color-surface-default);
}

.c-app-shell__flash {
  margin-block: var(--wa-space-l);
  padding-inline: var(--wa-space-m);

  @media (width >= 48rem) {
    margin-block: var(--wa-space-xl);
    padding-inline: var(--wa-space-xl);
  }

  /* The hero-mode header floats over the page; keep flash messages visible below it. */
  .c-site-header--hero + .c-app-shell & {
    margin-block-start: calc(var(--wr-site-header-height) + var(--wa-space-l));

    @media (width >= 48rem) {
      margin-block-start: calc(var(--wr-site-header-height) + var(--wa-space-xl));
    }
  }
}

.c-auth-page {
  margin: var(--wa-space-l) var(--wa-space-m);

  @media (width >= 48rem) {
    margin: var(--wa-space-xl);
  }
}

.c-strava-join {
  display: inline-flex;
  align-items: center;
  gap: var(--wa-space-xs);
}

.c-strava-join__logo {
  display: block;
  width: auto;
  height: 1rem;
}