/* ==========================================================================
   TOKENS — colour, type and the shape of the screen.
   One screen, two modes: .mode-os (System 7 desktop) and .mode-cli (terminal
   site). Each mode defines its own palette on its own root.
   ========================================================================== */

:root {
    --teal: #20b2aa;
    --teal-bright: #40e0d0;
    --teal-deep: #178a84;

    /* the screen is the whole viewport; its corners are only slightly rounded */
    --screen-radius: clamp(0px, 1.4vw, 16px);

    /* the Desktop's menu bar (a finger needs more: css/touch.css) */
    --mb-h: 22px;

    /* Marian OS (System 7.5-ish) */
    --s7-white: #ffffff;
    --s7-black: #000000;
    --s7-gray-1: #f0f0f0;
    --s7-gray-2: #dddddd;
    --s7-gray-3: #bdbdbd;
    --s7-gray-4: #999999;
    --s7-gray-5: #6e6e6e;
    --s7-desktop-a: #9a9a9a;
    --s7-desktop-b: #c9c9c9;

    --font-ui: 'Jersey 10', 'Courier New', monospace;          /* chrome: menus, titles, buttons (Chicago-ish) */
    --font-body: 'Atkinson Hyperlegible Next', system-ui, -apple-system, 'Segoe UI', sans-serif;   /* running text and labels: built for legibility */
    --font-term: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;           /* terminal mode and firmware screens */
}

@media (max-width: 700px) {
    :root { --screen-radius: 0px; }
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
    height: 100%;
    background: #050403;
    overflow: hidden;
    -webkit-text-size-adjust: 100%;
}
html {
    -webkit-tap-highlight-color: transparent;       /* no grey flash on a tap */
    overscroll-behavior: none;                      /* no pull-to-refresh or rubber band: this is an app */
    touch-action: manipulation;                     /* no double-tap zoom (pinch still works); icons open with a double tap */
}

body {
    font-family: var(--font-ui);
    color: #e9e4d3;
    -webkit-font-smoothing: antialiased;
}

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}