/*
 * Design tokens. Every other stylesheet builds on these variables, so the
 * look of the whole app can be tuned from this one file.
 *
 * The typeface is not set here: --font-family comes from /theme/font,
 * which reads the font name in config/app.php.
 */

:root {
    /* Colour: strictly black and white, with greys only for quiet text and hairlines. */
    --color-bg: #ffffff;
    --color-fg: #000000;
    --color-muted: #555555;
    --color-subtle: #f1f1f1;
    --color-hairline: #cfcfcf;
    --color-overlay: rgb(0 0 0 / 0.4);

    /* Type */
    --font-weight-light: 300;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-md: 1rem;
    --text-lg: 1.25rem;
    --text-xl: 1.75rem;
    --text-2xl: 2.5rem;
    --text-3xl: 4rem;

    --line-tight: 1.2;
    --line-normal: 1.55;

    /* Space */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;
    --space-8: 4rem;

    /* Shape */
    --border-width: 1.5px;
    --border: var(--border-width) solid var(--color-fg);
    --border-quiet: 1px solid var(--color-hairline);
    --radius: 8px;
    --radius-small: 5px;
    --radius-round: 999px;
    --shadow-lift: 4px 4px 0 var(--color-fg);
    --focus-ring: 0 0 0 2px var(--color-bg), 0 0 0 4px var(--color-fg);

    /* How far something finished is faded back. */
    --opacity-done: 0.45;

    /* Layout */
    --topbar-height: 3.5rem;
    --content-width: 78rem;
    --reading-width: 46rem;
    --gutter-wide: 5rem;
    --card-min-width: 12.5rem;
    --card-ratio: 3 / 4;
    --control-height: 2.5rem;
    --control-height-small: 2rem;
    /* How far each depth of the list is set in from the one above. */
    --tree-indent: 1.5rem;
    --tree-toggle-size: 1.25rem;
    /* The line that shows where something would be added or dropped, and how far its neighbours move aside for it. */
    --insert-line-width: 3px;
    --insert-hint-width: 1px;
    --insert-part: 3px;
    --insert-part-roomy: 10px;
    /* How small a card is drawn while it is dragged, so what is under it can be seen. */
    --drag-scale: 0.67;

    /* Motion */
    --transition: 120ms ease;

    --layer-menu: 30;
    --layer-drag: 40;
    --layer-toast: 50;
}

/* Dark mode is the exact inverse. theme.js sets data-theme on <html>. */
:root[data-theme="dark"] {
    --color-bg: #000000;
    --color-fg: #ffffff;
    --color-muted: #b0b0b0;
    --color-subtle: #1c1c1c;
    --color-hairline: #3d3d3d;
    --color-overlay: rgb(255 255 255 / 0.25);
}