/* Colors, fonts, radii. Load before www.css. card.css and console.css, the
   two skeletons page.html replaces, redeclare some of these with their own
   values and win over the ones here.

   Every hue comes from the neon-wave logo and the circuit picture, not from
   a framework palette: magenta #fe0abd and violet #8a42ff from the mark,
   cyan #29d1ff from its node rings and the circuit traces, and the
   violet-navy of the picture's ground for every neutral. Magenta is the one
   primary action, cyan is focus, violet is selection. Nothing else is
   colored.

   Each text color carries its contrast ratio at the worst point measured:
   the lightest pixel behind it on a panel over the brightest part of
   the page. WCAG AA wants 4.5:1 for text and 3:1 for a control's border. A
   color used with an alpha is a triplet: rgb(var(--danger-rgb) / 0.12). */

@font-face {
    font-family: "Monaspace Neon";
    src: url("brand/monaspace-neon-var.3cf91fb3c62a.woff2") format("woff2");
    font-weight: 200 800;
    font-stretch: 100% 125%;
    font-display: swap;
}

:root {
    --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --mono: "Monaspace Neon", ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, monospace;
    /* Monaspace stylistic sets. ss05 is F# and ss08 centers the period,
       which moves the decimal point in numbers. */
    --mono-features: "calt", "liga", "ss01", "ss02", "ss03", "ss04", "ss06", "ss07", "ss09", "ss10";

    /* The page: violet-navy lifted from the circuit picture's own ground,
       lighter at the top left. */
    --ground: #151433;
    --page-background:
        radial-gradient(120% 80% at 0% 0%, #2a1a57 0%, transparent 60%),
        radial-gradient(90% 70% at 100% 100%, #0f2446 0%, transparent 65%),
        linear-gradient(160deg, #1e1745 0%, #171a3d 50%, #121634 100%);
    --circuit-opacity: 0.15;
    --circuit-blur: 2px;

    /* Panel: a translucent, blurred lavender tint lighter than the page
       under it, an edge lit from above, and hairlines instead of colored
       outlines. */
    --panel-rgb: 44 40 92;
    --panel: rgb(var(--panel-rgb) / 0.5);
    --panel-strong: rgb(34 31 74 / 0.94);
    --panel-solid: #221f4a;
    /* What a panel becomes where backdrop-filter is not supported: the
       composite the blurred panel measured over the page, made opaque. */
    --panel-fallback: #211f4c;
    --bar-fallback: #19173f;
    --panel-blur: blur(20px) saturate(140%);
    /* The mark's trace, magenta through violet to cyan, fading at both
       ends. Drawn only under the top bar and along the sign-in card's top. */
    --wire: linear-gradient(90deg, transparent, rgb(254 10 189 / 0.85) 25%, rgb(138 66 255 / 0.8) 55%, rgb(41 209 255 / 0.75) 80%, transparent);
    --panel-line: rgb(255 255 255 / 0.09);
    --panel-edge: inset 0 1px 0 rgb(255 255 255 / 0.07);
    --panel-shadow-soft: var(--panel-edge), 0 1px 2px rgb(6 4 20 / 0.25), 0 12px 32px -12px rgb(6 4 20 / 0.45);
    --float-shadow: var(--panel-edge), 0 16px 40px -8px rgb(4 2 16 / 0.6), 0 0 0 1px rgb(255 255 255 / 0.06);
    --wash: rgb(255 255 255 / 0.03);
    --wash-hover: rgb(255 255 255 / 0.055);

    --bg: #151433;
    --surface: #1f1c45;
    --surface-2: #25224f;
    --surface-hover: rgb(255 255 255 / 0.07);
    --line: rgb(255 255 255 / 0.1);
    --line-soft: rgb(255 255 255 / 0.065);
    --input-border: #807ba9; /* 3.36 on the lightest panel, 4.45 on the field */
    --input-border-hover: #9994c0;

    /* Measured in headless Firefox on the lightest pixel behind the text
       on every page at 360 and 1280. A panel composites to about
       #21204d, lit up to #2a2a5c where a trace runs under it. */
    --text: #f0edfa; /* 10.48 */
    --text-soft: #cfc9e4; /* 7.31 */
    --text-muted: #aaa3c6; /* 5.14 */
    --text-faint: #a49dc2; /* 4.95 */

    --magenta: #fe0abd;
    --accent: #c3128f;
    --accent-hover: #d0149a;
    --accent-ink: #fff; /* on --accent 5.52, on --accent-hover 4.94 */
    --accent-fill: #c3128f;
    --accent-text: #ff7cc8; /* 5.63 */
    --link: #ff7cc8; /* 5.63 */
    --violet: #8a42ff;
    --cyan: #29d1ff; /* 7.36 */

    --ok: #6fe3b8; /* 8.43 */
    --warn: #f5b860; /* 6.60 on its own tint */
    --danger: #ff7d95; /* 5.44 */
    --danger-fill: #c21845; /* white on it 5.98 */
    --danger-fill-hover: #a8133b;

    --accent-rgb: 195 18 143;
    --magenta-rgb: 254 10 189;
    --violet-rgb: 138 66 255;
    --cyan-rgb: 41 209 255;
    --ok-rgb: 111 227 184;
    --warn-rgb: 245 184 96;
    --danger-rgb: 255 125 149;
    --muted-rgb: 170 163 198;

    /* Radius grows with how far a surface floats above the page. */
    --radius-xs: 3px;
    --radius-sm: 6px;
    --radius: 8px;
    --panel-radius: 10px;
    --float-radius: 12px;
    --card-radius: 14px;
    --input-radius: 6px;

    /* One height for a field and the button beside it. A phone gets 48px,
       Material 3's touch target. */
    --control-height: 2.5rem;
    --tap: 3rem;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}