/* ==========================================================================
   PatchCanary site styles
   1. Fonts   2. Tokens   3. Base   4. Layout   5. Components   6. Pages
   Color names match the brand kit.
   ========================================================================== */

/* 1. Fonts: self-hosted IBM Plex (SIL Open Font License, see fonts/plex/OFL.txt) */
@font-face { font-family: "IBM Plex Sans"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/plex/IBMPlexSans-Regular-Latin1.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 500; font-style: normal; font-display: swap; src: url("../fonts/plex/IBMPlexSans-Medium-Latin1.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 600; font-style: normal; font-display: swap; src: url("../fonts/plex/IBMPlexSans-SemiBold-Latin1.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans Condensed"; font-weight: 600; font-style: normal; font-display: swap; src: url("../fonts/plex/IBMPlexSansCondensed-SemiBold-Latin1.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans Condensed"; font-weight: 700; font-style: normal; font-display: swap; src: url("../fonts/plex/IBMPlexSansCondensed-Bold-Latin1.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 500; font-style: normal; font-display: swap; src: url("../fonts/plex/IBMPlexMono-Medium-Latin1.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 600; font-style: normal; font-display: swap; src: url("../fonts/plex/IBMPlexMono-SemiBold-Latin1.woff2") format("woff2"); }

/* 2. Tokens */
:root {
    /* Brand palette */
    --canary: #f5c518;
    --canary-ink: #1a1600;
    --canary-deep: #855d00;

    /* Neutrals */
    --paper: #f6f4ee;
    --white: #ffffff;
    --line: #dfdace;
    --ink: #1a1b1d;
    --slate: #5c6167;
    --night: #16181b;
    --night-surface: #1c1f23;
    --night-line: #2e3238;
    --bone: #ece9e2;
    --fog: #a4a9af;

    /* Type */
    --font-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-display: "IBM Plex Sans Condensed", "Arial Narrow", system-ui, sans-serif;
    --font-mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;

    /* Theme roles, light by default. Components use these, never raw palette colors. */
    --color-bg: var(--paper);
    --color-surface: var(--white);
    --color-border: var(--line);
    --color-text: var(--ink);
    --color-text-muted: var(--slate);
    --color-link: var(--canary-deep);
    color-scheme: light;

    box-sizing: border-box;
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --color-bg: var(--night);
        --color-surface: var(--night-surface);
        --color-border: var(--night-line);
        --color-text: var(--bone);
        --color-text-muted: var(--fog);
        --color-link: var(--canary);
        color-scheme: dark;
    }
}

:root[data-theme="dark"] {
    --color-bg: var(--night);
    --color-surface: var(--night-surface);
    --color-border: var(--night-line);
    --color-text: var(--bone);
    --color-text-muted: var(--fog);
    --color-link: var(--canary);
    color-scheme: dark;
}

/* 3. Base */
*, *::before, *::after { box-sizing: inherit; }
html, body { height: 100%; }
body {
    margin: 0;
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-sans);
    font-size: 17px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}
a { color: var(--color-link); }
code { font-family: var(--font-mono); font-size: 0.9em; overflow-wrap: anywhere; }
:focus-visible { outline: 3px solid var(--canary); outline-offset: 3px; border-radius: 4px; }

/* 4. Layout */
.site {
    min-height: 100%;
    max-width: 1080px;
    margin: 0 auto;
    padding: 28px clamp(20px, 5vw, 56px) 40px;
    display: grid;
    grid-template-rows: auto 1fr auto;
    gap: 48px;
}
.site-header { display: flex; align-items: center; justify-content: space-between; }
.site-main { align-self: center; display: grid; gap: 40px; max-width: 760px; }
.site-footer { display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: 14px; color: var(--color-text-muted); }

/* 5. Components */
.brand { display: flex; align-items: center; gap: 10px; color: var(--color-text); text-decoration: none; }
.brand-name { font-family: var(--font-display); font-size: 22px; font-weight: 700; letter-spacing: -0.2px; }

.theme-toggle {
    width: 44px; height: 44px;
    display: grid; place-items: center;
    background: var(--color-surface); color: var(--color-text);
    border: 1px solid var(--color-border); border-radius: 8px;
    cursor: pointer;
}
.theme-toggle-moon { display: none; }
:root[data-mode="light"] .theme-toggle-sun { display: none; }
:root[data-mode="light"] .theme-toggle-moon { display: block; }

.button {
    display: inline-flex; align-items: center;
    min-height: 44px; padding: 0 18px;
    background: var(--canary); color: var(--canary-ink);
    border-radius: 8px; font-weight: 600; text-decoration: none;
}
.button:hover { filter: brightness(0.95); }

/* 6. Pages */
.hero { display: grid; gap: 24px; }
.hero-title {
    margin: 0;
    font-family: var(--font-display); font-weight: 700;
    font-size: clamp(42px, 8vw, 84px); line-height: 0.98; letter-spacing: -1px;
}
.hero-lede { margin: 0; font-size: clamp(17px, 2.2vw, 20px); color: var(--color-text-muted); max-width: 34em; }

.patch-calendar { display: grid; gap: 14px; }
.patch-calendar-heading { margin: 0; font-size: 15px; font-weight: 400; color: var(--color-text-muted); }
.patch-calendar-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.patch-calendar-item {
    min-width: 132px; padding: 14px 16px;
    display: grid; gap: 2px;
    background: var(--color-surface);
    border: 1px solid var(--color-border); border-radius: 10px;
}
.patch-calendar-date { font-family: var(--font-mono); font-weight: 600; font-size: 22px; }
.patch-calendar-when { font-size: 13px; color: var(--color-text-muted); }
.patch-calendar-item.is-next { background: var(--canary); border-color: var(--canary); color: var(--canary-ink); }
.patch-calendar-item.is-next .patch-calendar-when { color: var(--canary-ink); }

.status { display: grid; gap: 20px; justify-items: start; }
.status > p { margin: 0; }
.status-badge {
    padding: 4px 10px; border-radius: 6px;
    background: var(--canary); color: var(--canary-ink);
    font-family: var(--font-mono); font-weight: 600; font-size: 15px;
}

@media (prefers-reduced-motion: no-preference) {
    .patch-calendar-item.is-next { animation: arrive 700ms ease-out 300ms both; }
    @keyframes arrive { from { transform: translateY(6px); opacity: 0; } to { transform: none; opacity: 1; } }
}