/*
 * The visual language of Paperbrook ("autumn reading room"): fonts, colours and how plain HTML elements look.
 * Everything else builds on the custom properties defined here; modern-normalize evens out browsers before it.
 */

/* --- Tokens -------------------------------------------------------------- */

:root {
    /* Grounds: warm, slightly creamy instead of pure white. */
    --parchment: #f5f0e8; /* the background of the application */
    --paper: #fffcf7; /* cards, dialogs */
    --linen: #eee7db; /* the sidebar, chips */
    --thread: #e3d9c9; /* borders, lines */
    --thread-strong: #d9cebd; /* borders of fields and buttons */

    /* Moss is the only colour of actions. */
    --moss: #4c6a4b; /* the main action, active items, links */
    --moss-dark: #3d563d; /* ... when hovered */
    --moss-deep: #2f4a30; /* text on moss mist */
    --moss-mist: #e0e8db; /* the background of active items */
    --moss-night: #35492f; /* shapes on moss */

    --moss-haze: #f2f5ee; /* the drop zone */
    --moss-pale: #b9c7b3; /* its border */
    --moss-light: #dce5d8; /* text on moss */
    --moss-light-dim: #c5d3c0; /* quieter text on moss */

    --honey: #c8892b; /* highlights */
    --ember: #b2462e; /* destructive actions, errors */
    --ember-mist: #f7e4de; /* the background of errors */
    --ember-deep: #8a3521; /* text on ember mist */

    --ink: #2a241f; /* text */
    --ink-soft: #4a413b; /* labels, quieter text */
    --bark: #6b6058; /* secondary text */
    --bark-light: #8c8077; /* placeholders, quiet icons – too light for text */

    /* The covers drawn for books without one: muted tones of the same family as moss, and the text on them. */
    --cover-moss: #4c6a4b;
    --cover-slate: #3f5e6e;
    --cover-clay: #a3553a;
    --cover-ochre: #8f6a25;
    --cover-plum: #6b4a5f;
    --cover-bark: #6e4f3a;
    --cover-teal: #3e6b6b;
    --cover-amber: #7a5c2e;
    --cover-rust: #8a4a2e;
    --cover-olive: #4f5b3a;
    --chalk: #f7f3ec;

    /* Variable fonts from the @fontsource-variable packages (see importmap.php), served by the application itself. */
    --font-serif: 'Newsreader Variable', Georgia, serif; /* headings, titles of books, the wordmark */
    --font-sans: 'Figtree Variable', 'Segoe UI', system-ui, sans-serif; /* everything else */

    --radius-small: 0.5rem;
    --radius-control: 0.625rem; /* buttons, fields */
    --radius-card: 0.75rem;
    --radius-modal: 1rem;

    --focus-ring: 0 0 0 3px rgb(76 106 75 / 0.25);

    color-scheme: light;
}

/* --- Elements ------------------------------------------------------------ */

html {
    background: var(--parchment);
    color: var(--ink);
    font-family: var(--font-sans);
    line-height: 1.5;
}

body {
    min-height: 100vh;
    font-size: 0.9375rem;
}

h1,
h2,
h3 {
    margin: 0;
    font-family: var(--font-serif);
    font-weight: 500;
    line-height: 1.15;
    letter-spacing: -0.01em;
}

p,
dl,
dd,
ul,
ol {
    margin: 0;
}

a {
    color: var(--moss);
    font-weight: 500;
    text-decoration: none;
}

a:hover {
    color: var(--moss-dark);
    text-decoration: underline;
}

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

::selection {
    background: rgb(76 106 75 / 0.25);
}

::placeholder {
    color: var(--bark-light);
    opacity: 1;
}

/* Wins over any `display` a class gives to the element. */
[hidden] {
    display: none !important;
}

/* --- Helpers ------------------------------------------------------------- */

/* Text for screen readers only, e.g. next to an icon that speaks for itself. */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.icon {
    flex-shrink: 0;
}