/* Waggle: the Ottabuzz design system. A waggle dance is how a scout bee tells the hive where the flowers are.
   This file is the whole token contract. Components in app.css read these names and nothing else.
   The one rule: honey marks what deserves your next ten minutes. Everything else is ink on paper.
   The whole system on one page: design-system/index.html. Every component, live: /kitchensink in the app. */

@font-face {
    font-family: 'Young Serif';
    src: url(/fonts/young-serif-latin-400-normal.woff2) format('woff2');
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: Geist;
    src: url(/fonts/geist-latin-wght-normal.woff2) format('woff2');
    font-weight: 100 900;
    font-display: swap;
}
@font-face {
    font-family: 'Geist Mono';
    src: url(/fonts/geist-mono-latin-wght-normal.woff2) format('woff2');
    font-weight: 100 900;
    font-display: swap;
}

:root {
    /* Brand: one variable. Every honey shade derives from it, so a retint is a one-line change. */
    --brand: #f5a90a;
    --brand-hover: color-mix(in oklab, var(--brand) 90%, white);
    --brand-press: color-mix(in oklab, var(--brand) 86%, black);
    --brand-soft: color-mix(in oklab, var(--brand) 50%, var(--paper));
    --brand-wash: color-mix(in oklab, var(--brand) 11%, var(--paper));
    --on-brand: #1d1a12;
    /* The honey button's edge, like a key: its darker side in light. In dark, where a shadow has nothing
       lighter to fall on, the key catches light on its top edge instead. */
    --bevel: inset 0 -2px 0 color-mix(in oklab, var(--brand-press) 55%, transparent);
    /* Ink warming into honey: a gradient for display type that carries the brand without a honey fill. Built from
       --ink, so it turns pale in the dark room on its own. Paint it on text with background-clip: text. */
    --ink-honey: linear-gradient(92deg, var(--ink) 10%, color-mix(in oklab, var(--brand) 52%, var(--ink)));

    /* Room: light. Components read these aliases, never raw values. */
    --paper: #ffffff;
    --paper-2: #f8f7f4;
    --paper-3: #efeeea;
    /* What floats: the same paper in light; a shade lighter than paper in dark, so height reads without a heavy shadow. */
    --paper-raised: #ffffff;
    --ink: #1f1e1b;
    --ink-2: #55544f;
    --ink-3: #72716b;
    --line: #e8e7e2;
    --line-2: #d5d4ce;
    /* Edges that must read at 3:1: checkbox, radio, switch, a field on hover. */
    --line-strong: #8b8a85;
    --focus: var(--ink);
    --selection: var(--line-2);
    /* Hover and press tints over any paper, and the sheet behind a modal. */
    --wash: #1f1e1b0d;
    --wash-2: #1f1e1b17;
    --scrim: #1f1e1b59;
    /* Heat without honey: a cold cell, and an empty one. Warm and hot are brand-soft and brand. */
    --wax: color-mix(in oklab, var(--brand) 14%, var(--paper-3));
    --wax-faint: color-mix(in oklab, var(--brand) 5%, var(--paper-2));
    /* Danger appears in three places only: an invalid field's edge, its error line, an alert's icon. */
    --danger: color-mix(in oklab, var(--red) 78%, black);
    --danger-wash: color-mix(in oklab, var(--red) 9%, var(--paper));

    /* Tag hues. A tag sets <hue>-wash behind <hue>-ink; the hue itself is never text. */
    --red: #e5484d;
    --orange: #f76b15;
    --green: #30a46c;
    --blue: #3e7bfa;
    --violet: #8e4ec6;
    --pink: #d6409f;
    --gray: #8b8a85;
    --red-wash: color-mix(in oklab, var(--red) 15%, var(--paper));
    --red-ink: color-mix(in oklab, var(--red) 42%, var(--ink));
    --orange-wash: color-mix(in oklab, var(--orange) 15%, var(--paper));
    --orange-ink: color-mix(in oklab, var(--orange) 42%, var(--ink));
    --green-wash: color-mix(in oklab, var(--green) 15%, var(--paper));
    --green-ink: color-mix(in oklab, var(--green) 42%, var(--ink));
    --blue-wash: color-mix(in oklab, var(--blue) 15%, var(--paper));
    --blue-ink: color-mix(in oklab, var(--blue) 42%, var(--ink));
    --violet-wash: color-mix(in oklab, var(--violet) 15%, var(--paper));
    --violet-ink: color-mix(in oklab, var(--violet) 42%, var(--ink));
    --pink-wash: color-mix(in oklab, var(--pink) 15%, var(--paper));
    --pink-ink: color-mix(in oklab, var(--pink) 42%, var(--ink));
    --gray-wash: var(--paper-3);
    --gray-ink: var(--ink-2);

    /* Type: three faces, one job each.
       The label (Young Serif) is the jar label: page titles and the wordmark.
       The voice (Geist) is everything you read and press.
       The machine (Geist Mono) sets numbers you might quote: scores and counts. */
    --label: 'Young Serif', Georgia, serif;
    --voice: Geist, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
    --machine: 'Geist Mono', ui-monospace, 'SF Mono', Consolas, monospace;
    --font-label: var(--label);
    --font-voice: var(--voice);
    --font-machine: var(--machine);
    --t-1: 0.75rem;
    --t-2: 0.8125rem;
    --t-3: 0.875rem;
    --t-4: 1rem;
    --t-5: 1.25rem;
    --t-6: 1.625rem;
    --t-7: 2.25rem;
    --t-8: 2.75rem;

    /* Space: a 4px scale. Nothing between the steps. */
    --s-1: 4px;
    --s-2: 8px;
    --s-3: 12px;
    --s-4: 16px;
    --s-5: 24px;
    --s-6: 32px;
    --s-7: 48px;
    --s-8: 64px;
    --s-9: 96px;

    /* Shape: tags, controls, panels, dialogs, pills. The hexagon is the only other shape and it always means a thread. */
    --r-1: 4px;
    --r-2: 7px;
    --r-3: 12px;
    --r-4: 16px;
    --r-full: 999px;
    --hex: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);

    /* Size: controls, the heat cell, the sidebar and the main column. */
    --control-sm: 28px;
    --control-md: 32px;
    --control-lg: 44px;
    --hex-w: 40px;
    --side: 244px;
    --measure: 780px;

    /* Motion: scarce. It answers a pointer, opens what floats, or fills the comb once on load. */
    --dur-1: 120ms;
    --dur-2: 240ms;
    --dur-3: 360ms;
    --ease: cubic-bezier(0.2, 0, 0, 1);

    /* Depth means float: menus, toasts and tooltips wear float-1, a dialog float-2. Nothing else has a shadow. */
    --float-1: 0 1px 2px #1f1e1b14, 0 8px 24px -6px #1f1e1b29;
    --float-2: 0 2px 4px #1f1e1b14, 0 24px 56px -12px #1f1e1b47;

    color-scheme: light;
}

/* Room: dark. Same aliases, so no component knows which room it is in. The head sets data-theme before paint, from
   the saved choice or the system; the media query below covers a page that loads without the script. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme='light']) {
        --paper: #171716;
        --paper-2: #1e1e1c;
        --paper-3: #2a2a27;
        --paper-raised: #232320;
        --ink: #eeede8;
        --ink-2: #b4b3ac;
        --ink-3: #908f88;
        --line: #2d2d2a;
        --line-2: #42423e;
        --line-strong: #7a7973;
        --selection: #42423e;
        --wash: #eeede812;
        --wash-2: #eeede81f;
        --scrim: #0a0a09a6;
        --wax: color-mix(in oklab, var(--brand) 20%, var(--paper-3));
        --wax-faint: color-mix(in oklab, var(--brand) 7%, var(--paper-2));
        --danger: color-mix(in oklab, var(--red) 70%, white);
        --danger-wash: color-mix(in oklab, var(--red) 18%, var(--paper));
        --bevel: inset 0 1px 0 color-mix(in oklab, var(--brand) 50%, white), inset 0 -2px 0 var(--brand-press);
        --float-1: 0 0 0 1px #eeede814, 0 8px 24px -6px #000000b3;
        --float-2: 0 0 0 1px #eeede81a, 0 24px 56px -12px #000000d9;
        color-scheme: dark;
    }
}
:root[data-theme='dark'] {
    --paper: #171716;
    --paper-2: #1e1e1c;
    --paper-3: #2a2a27;
    --paper-raised: #232320;
    --ink: #eeede8;
    --ink-2: #b4b3ac;
    --ink-3: #908f88;
    --line: #2d2d2a;
    --line-2: #42423e;
    --line-strong: #7a7973;
    --selection: #42423e;
    --wash: #eeede812;
    --wash-2: #eeede81f;
    --scrim: #0a0a09a6;
    --wax: color-mix(in oklab, var(--brand) 20%, var(--paper-3));
    --wax-faint: color-mix(in oklab, var(--brand) 7%, var(--paper-2));
    --danger: color-mix(in oklab, var(--red) 70%, white);
    --danger-wash: color-mix(in oklab, var(--red) 18%, var(--paper));
    --bevel: inset 0 1px 0 color-mix(in oklab, var(--brand) 50%, white), inset 0 -2px 0 var(--brand-press);
    --float-1: 0 0 0 1px #eeede814, 0 8px 24px -6px #000000b3;
    --float-2: 0 0 0 1px #eeede81a, 0 24px 56px -12px #000000d9;
    color-scheme: dark;
}