/*
 * styles.css
 * ordessa-website
 *
 * THIS FILE IS NOT A PLACE TO STYLE THINGS.
 *
 * How an element looks is stated on the view as a modifier, the way it is in
 * ordessa-web, ordessa-manager-web and ordessa-dashboard-web. Only what inline
 * styles cannot express belongs here:
 *
 *   1. custom properties — the --website-* palette the design tokens name
 *   2. at-rules          — @media for dark mode and reduced motion
 *   3. selectors         — :hover, :focus-visible, and the element resets
 */

:root {
    color-scheme: light dark;

    /* The storefront's palette, so the site reads as the same Ordessa. */
    --website-background: #fdf7f0;
    --website-surface: #ffffff;
    --website-border: #e7d9c8;
    --website-text: #241a12;
    --website-text-secondary: #6f5d50;
    --website-accent: #b93c23;
    --website-draft: #fbe7a6;
    --website-draft-text: #3d2c00;

    --website-radius-panel: 14px;
    --website-radius-capsule: 999px;

    --website-measure: 720px;
    --website-gutter: 16px;
}

@media (prefers-color-scheme: dark) {
    :root {
        --website-background: #17110d;
        --website-surface: #221a15;
        --website-border: #3a2c23;
        --website-text: #f6ece2;
        --website-text-secondary: #b7a496;
        --website-accent: #ef6a4c;
        --website-draft: #4d3b0b;
        --website-draft-text: #fbe7a6;
    }
}

/* Element resets: the page's own background and type, and no UA margin. */
* {
    box-sizing: border-box;
}

body {
    margin: 0;
    background: var(--website-background);
    color: var(--website-text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* Selectors. */
a:hover {
    text-decoration-thickness: 2px;
}

a:focus-visible {
    outline: 2px solid var(--website-accent);
    outline-offset: 3px;
    border-radius: 3px;
}

li::marker {
    color: var(--website-text-secondary);
}