/* Alpine Crown design tokens — the one place the colours and fonts are set.
   Every page links this file (the app, the reading pages, the climb pages and the
   Worker's own pages). Change a colour here, never in a page. */
:root {
  --paper:#f6f1e7; --card:#fffdf8; --ink:#2b2620; --muted:#746a5d;
  --line:#e3dccd; --accent:#c0532a; --accent-soft:#f3e7dd; --gold:#cf9b32;
  --serif:"Spectral",Georgia,"Times New Roman",serif;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}

/* ---- Scale: six text sizes, two corners. Pages use these, not raw values. ---- */
:root {
  --fs-xs:.7rem;   /* small-caps labels, legends */
  --fs-s:.78rem;   /* chips, meta lines, notes */
  --fs-m:.86rem;   /* buttons, secondary text */
  --fs-b:.95rem;   /* body in panels */
  --fs-l:1.1rem;   /* small headings */
  --fs-xl:1.5rem;  /* headings */
  --fs-2xl:1.9rem; /* page and card titles */
  --r:8px;         /* buttons, inputs, boxes */
  --r-pill:999px;  /* chips */
  --on-accent:#fffdf8; /* text on a red fill */
}

/* ---- One focus ring: every control shows it when reached with the keyboard. ---- */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline:2px solid var(--accent); outline-offset:2px;
}

/* ---- One button: normal, primary (red), danger. ---- */
.btn { display:inline-block; padding:8px 14px; border-radius:var(--r); border:1px solid var(--line);
       background:var(--card); color:var(--ink); font:600 var(--fs-m)/1.3 var(--sans);
       cursor:pointer; text-decoration:none; text-align:center; }
.btn:hover { border-color:var(--accent); }
.btn.primary { background:var(--accent); border-color:var(--accent); color:var(--on-accent); }
.btn.primary:hover { filter:brightness(1.06); }
.btn.danger { color:#a33b2a; border-color:#dcc0b8; font-weight:500; }
.btn:disabled { opacity:.55; cursor:default; }

/* ---- One chip (pill). Selected = the red fill. ---- */
.chip { display:inline-flex; align-items:center; gap:4px; padding:4px 10px; border-radius:var(--r-pill);
        border:1px solid var(--line); background:var(--card); color:var(--ink);
        font:400 var(--fs-s)/1.3 var(--sans); white-space:nowrap; }
button.chip { cursor:pointer; }
button.chip:hover { border-color:var(--accent); }
.chip.on, .chip[aria-pressed="true"] { background:var(--accent); border-color:var(--accent); color:var(--on-accent); }

/* ---- One small-caps label. ---- */
.label { font:600 var(--fs-xs)/1.3 var(--sans); letter-spacing:.07em; text-transform:uppercase; color:var(--muted); }

/* ---- Icons: drawn, one colour (currentColor), sized to the text. ---- */
.ico { width:1.05em; height:1.05em; vertical-align:-.15em; flex:none; }
/* A section title in a panel (red small capitals): "Your climbs", "The story". */
.kicker { font:600 var(--fs-xs)/1.3 var(--serif); letter-spacing:.16em; text-transform:uppercase; color:var(--accent); }