/*
 * Design tokens + global reset. The look is recenzovac's public pages — warm paper and ink,
 * Fraunces for headings, Inter for prose — used here for the whole app, because every screen of
 * this one is about a manuscript (CLAUDE.md, plan: UX/UI).
 *
 * Theme: the system decides. There is no in-app theme switch; `prefers-color-scheme` flips the
 * palette. `color-scheme` makes the browser follow along for the things CSS cannot reach: form
 * control chrome, scrollbars, and the default canvas colour before the stylesheet loads.
 *
 * The layer order is also pinned by an inline <style> in base.html.twig, above every stylesheet —
 * see the comment there for why repeating it here is not enough.
 */
@layer tokens, base, components, utilities;

/*
 * Self-hosted, and that is the point rather than a preference: the cookie notice says this
 * site loads nothing from a third party until you agree to the Picker, and a stylesheet link
 * to fonts.googleapis.com would make that sentence false — every visitor's IP would go to
 * Google before they had answered anything.
 *
 * Variable fonts, two subsets each. `latin-ext` is not optional here: without it Slovak loses
 * č, š, ž, ľ, ĺ, ŕ and ô to a fallback face, and a heading set in two different typefaces is
 * the first thing anybody notices.
 *
 * `font-display: swap` — the text is the content, so it has to be readable before the face
 * arrives, not after.
 */
@font-face {
    font-family: 'Fraunces';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("../fonts/fraunces-latin-SfWU466.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: 'Fraunces';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("../fonts/fraunces-latin-ext-lB3xlu4.woff2") format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("../fonts/inter-latin-Gz7AlRl.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: 'Inter';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("../fonts/inter-latin-ext-1Br77OV.woff2") format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@layer tokens {
    :root {
        color-scheme: light dark;

        /* Spacing and type scale: one ladder, used everywhere. */
        --space-2xs: 0.25rem;
        --space-xs: 0.5rem;
        --space-s: 0.75rem;
        --space-m: 1rem;
        --space-l: 1.5rem;
        --space-xl: 2.5rem;
        --space-2xl: clamp(3.5rem, 9vw, 7rem);

        --text-xs: 0.8125rem;
        --text-s: 0.875rem;
        --text-m: 1rem;
        --text-l: 1.25rem;

        /* Fluid, because the public pages are read on a phone as well as on a laptop. */
        --text-display: clamp(2.5rem, 1.6rem + 4.2vw, 4.5rem);
        --text-title: clamp(1.75rem, 1.3rem + 2vw, 2.75rem);
        --text-section: clamp(1.35rem, 1.15rem + 0.9vw, 1.75rem);
        --text-lead: clamp(1.1rem, 1rem + 0.5vw, 1.35rem);

        /*
         * Fraunces is a variable serif with an optical-size axis — it is the typeface doing the
         * "this belongs to somebody who writes books" work, and it is used for headings and for
         * the book text itself. Inter carries the interface.
         */
        --font-display: 'Fraunces', 'Iowan Old Style', Georgia, serif;
        --font-body: 'Inter', system-ui, sans-serif;
        --font-book: var(--font-display);
        --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

        /* Prose wants a narrower measure than a layout does. 34rem is roughly 70 characters
           in Inter at this size — past that the eye loses the next line. */
        --measure: 34rem;
        --measure-book: 40rem;
        --measure-wide: 64rem;

        --radius-s: 0.375rem;
        --radius-m: 0.75rem;
        --radius-l: 1.5rem;
        --radius-full: 999px;

        /* Paper and ink. */
        --paper: #fbf8f3;
        --paper-raised: #ffffff;
        --paper-sunken: #f2ece2;
        --ink: #1a1613;
        --ink-muted: #6b625a;
        --ink-line: #e2d9cb;
        /* Ultramarine: the colour of a pen somebody actually corrects a manuscript with. */
        --mark: #2b4acb;
        --mark-contrast: #ffffff;
        /* The highlighter behind a phrase under review — a search hit, a finding. */
        --mark-wash: #fde9b8;

        /* Diff colours for UI/SuggestionDiff (git-style: deleted struck through, inserted
           underlined). Never colour alone — the strike/underline carries the meaning too. */
        --diff-del: #a3261c;
        --diff-del-wash: #fbe3df;
        --diff-ins: #1d6b34;
        --diff-ins-wash: #dcf2e1;

        /* A write to Google failed — the author has to act (CLAUDE.md: no invisible failures). */
        --danger: #b3261e;
        --danger-wash: #fbe3df;

        /* Semantic aliases — components use these, never the raw palette. */
        --color-canvas: var(--paper);
        --color-surface: var(--paper-raised);
        --color-sunken: var(--paper-sunken);
        --color-border: var(--ink-line);
        --color-text: var(--ink);
        --color-text-muted: var(--ink-muted);
        --color-accent: var(--mark);
        --color-accent-contrast: var(--mark-contrast);
        --color-highlight: var(--mark-wash);
        --color-focus: var(--mark);
    }

    @media (prefers-color-scheme: dark) {
        :root {
            /* Paper at night is not grey, it is warm and nearly black — the same shift a
               reading lamp makes. A neutral #111 here reads as "the app", not as a page. */
            --paper: #14110e;
            --paper-raised: #1d1915;
            --paper-sunken: #0e0c0a;
            --ink: #f0e9df;
            --ink-muted: #a2968a;
            --ink-line: #332d26;
            --mark: #9db4ff;
            --mark-contrast: #0e1430;
            --mark-wash: #4a3c15;

            --diff-del: #ff8a7a;
            --diff-del-wash: #3d1b17;
            --diff-ins: #7fd99a;
            --diff-ins-wash: #15301d;

            --danger: #ff6b5e;
            --danger-wash: #3d1b17;
        }
    }
}

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

    body {
        margin: 0;
        min-height: 100dvh;
        background-color: var(--color-canvas);
        color: var(--color-text);
        font-family: var(--font-body);
        font-size: var(--text-m);
        /* Inter's contextual alternates and tabular figures: a number in a table lines up with
           the one below it. */
        font-feature-settings: 'cv05', 'tnum';
        line-height: 1.65;
        -webkit-font-smoothing: antialiased;
    }

    h1,
    h2,
    h3 {
        font-family: var(--font-display);
        /* The optical size is what matters — it thins the serifs as the heading grows. */
        font-variation-settings: 'opsz' 40;
        font-weight: 600;
        line-height: 1.1;
        letter-spacing: -0.015em;
        text-wrap: balance;
    }

    /* Prose, never a layout: a paragraph that breaks one word onto the last line is the most
       common thing wrong with a page that is otherwise fine. */
    p {
        text-wrap: pretty;
    }

    a {
        color: var(--color-accent);
    }

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

    button,
    input,
    textarea,
    select {
        font: inherit;
        color: inherit;
    }
}

@layer components {
    /* The sign-in screen and the waiting room (templates/security/*): one card, one button. */
    .login {
        display: grid;
        gap: var(--space-l);
        align-content: center;
        max-width: 24rem;
        min-height: 80dvh;
        margin-inline: auto;
        padding: var(--space-l);
    }

    .login__title {
        margin: 0;
        text-align: center;
        font-size: var(--text-section);
    }

    .login__form {
        display: grid;
        gap: var(--space-xs);
        padding: var(--space-l);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-m);
        background-color: var(--color-surface);
    }

    .login__hint {
        margin: 0 0 var(--space-m);
        color: var(--color-text-muted);
        font-size: var(--text-s);
    }

    .login__error {
        margin: 0;
        padding: var(--space-s) var(--space-m);
        border-radius: var(--radius-m);
        background-color: var(--danger-wash);
        color: var(--danger);
        font-size: var(--text-s);
    }

    .login__submit {
        min-block-size: 3rem;
        padding-inline: var(--space-m);
        border: none;
        border-radius: var(--radius-full);
        background-color: var(--color-accent);
        color: var(--color-accent-contrast);
        font-weight: 600;
        cursor: pointer;
    }

    /* The legal links in the layout's footer (base.html.twig). */
    .legal {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: var(--space-xs) var(--space-m);
        padding: var(--space-l) var(--space-m) var(--space-xl);
        color: var(--color-text-muted);
        font-size: var(--text-s);

        & a {
            color: inherit;
            text-decoration-color: var(--color-border);
        }
    }
}

@layer utilities {
    /*
     * Off-screen but still announced, and still part of the accessible name of its parent.
     * `clip-path` rather than `display: none`, which would remove it from the accessible name.
     */
    .visually-hidden {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
        border: 0;
    }
}