/* Brand tokens for direction B, "Developer console" (docs/spec/version-1/site-structure.md#visual-design),
   starting from prototype B's values on branch prototype/visual-design.

   Light and dark: every themed colour is one light-dark(light, dark) pair, resolved against the page's
   color-scheme. By default that follows the system setting; wwwroot/layout.js sets <html data-theme> when
   the visitor picks a theme, which pins it.

   Fonts are self-hosted (architecture AC 10): the Latin subsets of the variable Exo 2 and Roboto, as woff2,
   from Fontsource 5.3.0 (npm @fontsource-variable/exo-2 and @fontsource-variable/roboto). Both are under the SIL Open Font License 1.1; fonts/OFL-*.txt travel with them,
   as the licence requires. */

@font-face {
    font-family: "Exo 2";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("fonts/exo-2-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
        U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Roboto";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("fonts/roboto-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
        U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    color-scheme: light dark;

    /* Brand, from lacunasoftware.com: the same in both themes. */
    --navy: #000F29;
    --navy-2: #0B1F45;
    --orange: #E94E24;
    --orange-2: #F15A31; /* the spec's hover shade; also the current sidebar link's bar and the logo's orange */
    --orange-ink: #C2401B;

    /* Page */
    --bg: light-dark(#ffffff, #060D1C);
    --surface: light-dark(#F4F6F9, #0D1730);
    --surface-2: light-dark(#E9EDF3, #14213F);
    --text: light-dark(#212529, #D6DDE8);
    --heading: light-dark(#000F29, #FFFFFF);
    --muted: light-dark(#5B6474, #8C97AB);
    --border: light-dark(#DFE3EA, #1D2A47);
    --accent: light-dark(#E94E24, #F26B45);
    --accent-ink: light-dark(#C2401B, #FF8A66); /* accent for text: readable on --bg */
    --accent-fill: var(--orange-ink); /* primary buttons: --on-accent on it is 5.2:1 (WCAG AA); on --orange only 3.8:1 */
    --on-accent: #ffffff;
    --ok: light-dark(#13804B, #4CC38A);
    --ok-bg: light-dark(#E3F5EA, #0F2E22);
    --pending: #F5A524; /* a pending step's badge in the Status panel */
    --shadow: 0 1px 2px light-dark(#0000000f, #00000066), 0 6px 24px light-dark(#000f290f, #00000088);

    /* The navy sidebar: navy in both themes. */
    --sidebar-bg: var(--navy);
    --sidebar-text: #C3CCDC;
    --sidebar-muted: #6F7C97;
    --sidebar-hover: #ffffff0d;
    --sidebar-current: #E94E2422;
    --sidebar-strong: #ffffff; /* hovered and current links */
    --sidebar-subheading: #9AA6BD;
    --sidebar-divider: #ffffff1a;
    --sidebar-live: #4CC38A; /* the dot on a Demo the Demo Site runs */
    --sidebar-backdrop: #000000aa; /* behind the open sidebar on narrow screens */

    /* Type */
    --font-heading: "Exo 2", Roboto, system-ui, sans-serif;
    --font-body: Roboto, system-ui, sans-serif;
    --font-mono: ui-monospace, "Cascadia Code", Consolas, Menlo, monospace;

    /* Layout. Media queries can't read custom properties, so the three breakpoints are written out where used:
       - narrow, max-width 1100px: the sidebar leaves the page and opens from the top bar's menu button;
       - compact, max-width 860px: smaller gutter and headings, and the Catalogue's goal columns stack;
       - phone, max-width 640px: the top bar's outbound links take a second row. */
    --top-bar-height: 56px;
    --sidebar-width: 264px;
    --gutter: 28px;
}

:root[data-theme="light"] {
    color-scheme: light;
}

:root[data-theme="dark"] {
    color-scheme: dark;
}

/* Compact breakpoint. */
@media (max-width: 860px) {
    :root {
        --gutter: 16px;
    }
}