@import 'layout.css';
@import 'components.css';
@import 'printer.css';
@import 'utils.css';

:root {
    --paper: #f1f4f8;
    --paper-translucent: #f1f4f8ed;
    --card: #ffffff;
    --bar: #dce8f5;
    --rule: #c7d6e6;
    --ink: #14202e;
    --ink-2: #55677b;
    --signal: #2b4ecb;
    --signal-dark: #1d3796;
    --signal-tint: #e7edfc;
    --warn: #ad3327;
    
    --footer-text: #dde5ef;
    --footer-heading: #92a5bb;
    --footer-muted: #b2c1d3;
    --footer-border: #dde5ef47;
    --shadow-toast: #14202e38;
    --shadow-tile: #14202e1f;

    --font-ui: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, "Noto Sans Mono CJK JP", monospace;

    --sprocket: 30px;
    --radius: 3px;

    @media (max-width: 575.98px) {
        --sprocket: 20px;
    }
}

body {
    font-family: var(--font-ui);
    background-color: var(--paper);
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
    padding-bottom: 74px;

    @media (min-width: 992px) {
        padding-bottom: 0;
    }
}

main {
    min-height: 80vh;
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 clamp(12px, 3vw, 32px) 2.5rem;
}

a {
    color: var(--signal);
    text-underline-offset: 2px;

    &:hover {
        color: var(--signal-dark);
    }
}

*:focus-visible,
.chip:focus-within,
.seg-item:focus-within {
    outline: 2px solid var(--rule);
    outline-offset: 1px;
    border-radius: var(--radius);
}

.mono {
    font-family: var(--font-mono);
}