/* MenuVirtual color and type tokens, shared by the landing, account and menu pages.
   Colors come from the logo: navy wordmark, saffron outline. */

:root {
    color-scheme: light;
    --navy: #14173D;
    --saffron: #FFC22E;
    --chili: #C92F1B;
    --sheet: #FFFDF6;

    --paper: #FFFFFF;
    --surface: #FFF6D6;
    --ink: #14173D;
    --muted: #565A7A;
    --line: rgba(20, 23, 61, .18);

    --hero-bg: var(--saffron);
    --hero-ink: var(--navy);
    --hero-btn-bg: var(--navy);
    --hero-btn-ink: #FFFFFF;
    --btn-bg: var(--navy);
    --btn-ink: #FFFFFF;
    --mark-bg: var(--saffron);
    --tag-bg: var(--surface);
    --bezel: #14173D;

    --display: 'Bricolage Grotesque', 'Trebuchet MS', sans-serif;
    --body: 'Hanken Grotesk', 'Segoe UI', Roboto, sans-serif;
}

:root[data-theme='dark'] {
    color-scheme: dark;
    --paper: #12153A;
    --surface: #1B1F4D;
    --ink: #F6F3E8;
    --muted: #A9ACCB;
    --line: rgba(246, 243, 232, .2);

    --hero-bg: #1B1F4D;
    --hero-ink: #F6F3E8;
    --hero-btn-bg: var(--saffron);
    --hero-btn-ink: var(--navy);
    --btn-bg: var(--saffron);
    --btn-ink: var(--navy);
    --mark-bg: #1B1F4D;
    --tag-bg: #2A2F68;
    --bezel: #070920;
}