/* manrope-latin-400-normal */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(../fonts/manrope-latin-400-normal.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;
}

/* manrope-latin-500-normal */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(../fonts/manrope-latin-500-normal.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;
}

/* manrope-latin-700-normal */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(../fonts/manrope-latin-700-normal.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;
}

/* manrope-greek-400-normal */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(../fonts/manrope-greek-400-normal.woff2) format('woff2');
  unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
}

/* manrope-greek-500-normal */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(../fonts/manrope-greek-500-normal.woff2) format('woff2');
  unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
}

/* manrope-greek-700-normal */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(../fonts/manrope-greek-700-normal.woff2) format('woff2');
  unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
}

/* ==== Design Tokens ==== */
:root {
  --bg: #232a33;
  --panel: #2b333d;
  --bronze: #c8963e;
  --cream: #e8dcc8;
  --muted: #8a94a1;
  /* --ink and --panel are intentionally the same value today (both the
     app's dark navy) — --ink is used for text-on-bronze, --panel for
     surface backgrounds. Kept as separate tokens because they express
     different design intents even though they currently resolve equal. */
  --ink: #2b333d;
  --bronze-text-light: #a87a2e;

  /* --muted-on-panel: a lighter mix of --cream/--panel used only for body
     text sitting on a --panel surface (e.g. cards). --muted (#8a94a1) on
     --panel (#2b333d) measures 4.16:1, which fails WCAG AA (4.5:1) for
     normal text. color-mix(cream 62%, panel 38%) resolves to channel
     values 160/156/147 (approximately a09c93 as a hex triple), which
     measures 4.66:1 against #2b333d — computed 2026-08-02, verified via
     the WCAG relative-luminance formula in Python. No new hex literal is
     introduced; the allowlisted --cream/--panel tokens are mixed at
     render time. */
  --muted-on-panel: color-mix(in srgb, var(--cream) 62%, var(--panel));

  /* ==== v2 visual layer tokens ==== */
  /* --line: cream-tinted hairline used for every divider/rule in the v2
     layer (section-label trailing rule, alternated borders) — never gray. */
  --line: color-mix(in srgb, var(--cream) 10%, transparent);

  /* --bg-lift: subtle alternating section background (2.5% cream lifted
     off --bg, within the 2-3% range). */
  --bg-lift: color-mix(in srgb, var(--cream) 2.5%, var(--bg));

  /* --muted-on-lift: body text sitting directly on --bg-lift (not on a
     --panel card). --muted (#8a94a1) mixed straight onto --bg-lift measures
     below 4.5:1 (e.g. 4.45:1 at the --bg-lift value above), so this mirrors
     the --muted-on-panel technique: cream 64% mixed with --bg-lift resolves
     to channel values 163/157/148 against channel values 40/46/55, which
     measures 5.08:1 — computed 2026-08-02 via the WCAG relative-luminance
     formula in Python. */
  --muted-on-lift: color-mix(in srgb, var(--cream) 64%, var(--bg-lift));

  /* --label-color: section-label heading color (small uppercase tracked
     text). cream 62% mixed with transparent, composited over --bg measures
     5.05:1 and over --bg-lift measures 4.89:1 — both computed 2026-08-02,
     both clear 4.5:1 with margin. Sits within the 55-70% range from the
     v2 recipe. */
  --label-color: color-mix(in srgb, var(--cream) 62%, transparent);

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-bold: 700;
  --text-base: 16px;
  --leading: 1.6;
}

@media (min-width: 900px) {
  :root {
    --text-base: 18px;
  }
}

body {
  font-family: Manrope, system-ui, sans-serif;
  font-weight: var(--weight-regular);
  font-size: var(--text-base);
  line-height: var(--leading);
  color: var(--cream);
  background: var(--bg);
}