/*
 * "Twisties" theme, from the Claude design file: light grey ground with white panels, near-black text, a hot orange
 * accent and a deep teal second accent, set in Geist with heavy uppercase display headings.
 * Every colour and font used by app.css comes from here, so a different theme only needs a
 * different copy of this file.
 */
:root {
    --font-body: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-display: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;

    --bg: #f2f2f4;             /* the page itself */
    --paper: #ffffff;          /* inputs, secondary buttons and menus, which stay white on any ground */
    --surface: #ffffff;        /* cards, panels and the footer, lifted off the grey page */
    --surface-2: #e9e9ec;      /* chips and the pressed state of surfaces */
    --fg: #111114;
    --muted: #55555d;
    --faint: #6b6b74;
    --border: #e4e4e8;
    --border-strong: #c8c8cf;

    --accent: #e4541f;         /* primary buttons, the brand dot, route lines */
    --accent-hover: #c2410c;
    --accent-fg: #ffffff;
    --accent-ink: #9a3412;     /* links and small accent text; passes contrast on the grey page and on white */
    --accent-tint: #fff1eb;
    --accent-tint-fg: #7c2d12;

    --teal: #1f7a70;
    --teal-tint: #eef6f5;
    --teal-tint-fg: #114b45;

    --ink: #141416;            /* the dark banner on a group ride's page */
    --ink-fg: #ffffff;
    --ink-muted: #c9c9d0;
    --ink-raised: #26262b;     /* chips and the date tile's frame on the dark banner */
    --deep-teal: #17363a;      /* the ride-day forecast card */
    --deep-teal-fg: #ffffff;
    --deep-teal-muted: #cfe3e0;

    --alert: #e5322d;          /* the red dot and count for waiting connection requests */
    --alert-fg: #ffffff;
    --error: #b91c1c;
    --error-tint: #fff1eb;
    --success-tint: #eef6f5;

    /* Rider badge coins: the coin's face, its shine and its rim */
    --bronze: #c27c3e;
    --bronze-light: #f0c08e;
    --bronze-dark: #7c4a1f;
    --silver: #aeb3bb;
    --silver-light: #f1f3f6;
    --silver-dark: #686d76;
    --gold: #e2ae22;
    --gold-light: #fde68a;
    --gold-dark: #8f6508;
    --platinum: #9fbccb;
    --platinum-light: #eef7fb;
    --platinum-dark: #4f6d7b;
    --diamond: #4cc3e6;
    --diamond-light: #d8f6ff;
    --diamond-dark: #16708f;
    --coin-shadow: 0 4px 12px rgba(17, 17, 20, .18);

    --header-bg: rgba(242, 242, 244, .92);
    --shadow-lg: 0 16px 40px rgba(17, 17, 20, .14);

    --page-title-size: clamp(36px, 4.2vw, 56px);   /* every page's main heading, set by the Cafe Stop heading */

    --radius: 20px;
    --radius-lg: 32px;

    --route-line: #e4541f;
    --route-casing: #111114;
    --route-highlight: #1f7a70;
}