/*
 * Design tokens and page shell: the "Time card" look (docs/design.md).
 * Paper, ink and a signal amber; entry green and exit red like the stamps
 * of a punch clock. IBM Plex Mono for headings and figures, IBM Plex Sans
 * for text, both served from fonts/ (nothing loads from Google). Light only.
 */

@font-face {
    font-family: "IBM Plex Mono";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("../../fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2");
}

@font-face {
    font-family: "IBM Plex Mono";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../../fonts/ibm-plex-mono-latin-600-normal.woff2") format("woff2");
}

@font-face {
    font-family: "IBM Plex Sans";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../../fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2");
}

@font-face {
    font-family: "IBM Plex Sans";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../../fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2");
}

:root {
    color-scheme: light;

    --color-page: #f3efe4; /* paper */
    --color-card: #fbf8f1;
    --color-section: #efe9da;
    --color-text: #1c1b17; /* ink */
    --color-text-secondary: #5b574c;
    --color-rule: #d9d2c0; /* the card's dotted lines */
    --color-accent: #f59e0b; /* signal amber, behind ink text only */
    --color-accent-soft: #fce7b8;
    --color-label: #a3361a; /* small mono labels */
    --color-entry: #1e6b3a;
    --color-exit: #a3261b;
    --color-link-hover: #c2410c;

    --border: 2px solid var(--color-text);
    --border-thin: 1px solid var(--color-text);
    --radius: 2px;
    --shadow-card: 8px 8px 0 var(--color-text);

    --space-xxs: 2px;
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 12px;
    --space-lg: 16px;
    --space-xl: 24px;
    --space-xxl: 48px;

    --content-width: 1120px;
    --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
    --font-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

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

.layout {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--color-page);
    color: var(--color-text);
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.55;
    -webkit-text-size-adjust: 100%;
}

.layout a {
    color: inherit;
}

.layout a:hover {
    color: var(--color-link-hover);
}

.layout :focus-visible {
    outline: 2px solid var(--color-text);
    outline-offset: 2px;
}

.layout h1,
.layout h2,
.layout h3 {
    font-family: var(--font-mono);
    font-weight: 600;
}

.layout__main {
    flex: 1;
    width: 100%;
    max-width: var(--content-width);
    margin: 0 auto;
    padding: 0 var(--space-xl) var(--space-xxl);
}

@media (max-width: 600px) {
    .layout__main {
        padding: 0 var(--space-lg) var(--space-xl);
    }
}