/* Design tokens: the one place the product's colours, type, radii and shadows are defined.
   Every page loads this file first: the app (templates/layout/head.html), the landing page
   and the sign-in pages. A stylesheet names a token (var(--ui-line)), never a fixed colour,
   so a change here reaches every page.

   Light is the default theme; <html data-theme="dark"> swaps the colours. Only the landing
   page offers the choice (a switch in its footer); the app and the sign-in pages are light. */

@font-face {
    font-family: 'DM Sans';
    src: url('../fonts/dm-sans-latin.woff2') format('woff2');
    font-weight: 100 1000;
    font-style: normal;
    font-display: swap;
}
/* The display face: the accent line of a public page's headline (--ui-display). Italic only. */
@font-face {
    font-family: 'Instrument Serif';
    src: url('../fonts/instrument-serif-italic-latin.woff2') format('woff2');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

:root {
    color-scheme: light;

    /* Surfaces, from the page ground up to a raised panel. */
    --ui-bg: #fbfbfa;
    --ui-surface: #ffffff;
    --ui-surface-2: #ffffff;
    --ui-inset: #f4f4f2;
    --ui-hover: #f4f4f2;

    /* Lines: a divider, a field's edge, that edge under the pointer. */
    --ui-line: #e4e4e1;
    --ui-line-strong: #cfcfcb;
    --ui-line-hover: #a3a39e;

    /* Text: body, secondary, muted. */
    --ui-text: #171717;
    --ui-text-2: #4d4d4d;
    --ui-text-3: #5a5a5a;   /* muted TEXT. Never --ui-line-hover: that is a line. */

    /* The brand orange (the logo's #f90) and the ink that sits on it.
       -text is the orange for words and icons: darker on light so it stays readable.
       -strong carries a white mark (a tick, a switch), which the plain orange cannot. */
    --ui-accent: #ff9900;
    --ui-accent-2: #ffad33;
    --ui-accent-line: #e08600;
    --ui-accent-ink: #1b1100;
    --ui-accent-text: #b45309;
    --ui-accent-strong: #e77600;
    --ui-accent-soft: rgba(255, 153, 0, .14);
    --ui-ring: rgba(255, 153, 0, .28);

    /* The primary action: the fill of a primary button, of the current page number and of a
       picked date. A calmer amber than the brand orange above, which stays for the logo, the
       current entry of the sidebar and of the breadcrumb, focus rings and highlights. Change
       the primary colour here and all of those fills follow. */
    --ui-primary: #e8a630;
    --ui-primary-hover: #efb851;
    --ui-primary-line: #c98a1b;
    --ui-primary-ink: #1b1100;

    /* Meaning. Soft backgrounds are mixed from these where they are used. */
    --ui-good: #15803d;
    --ui-bad: #c81e1e;
    --ui-warn: #b45309;
    --ui-info: #1d4ed8;
    --ui-violet: #6d28d9;
    --ui-link: #1d4ed8;

    /* The app's sidebar is dark in both themes. */
    --ui-side-bg: #141414;
    --ui-side-line: #262626;
    --ui-side-hover: #1f1f1f;
    --ui-side-active: #2a2a2a;
    --ui-side-text: #b4b4b4;
    --ui-side-text-strong: #ffffff;
    --ui-side-muted: #8f8f8f;

    /* Shape, depth, motion and type. */
    --ui-radius-sm: 6px;
    --ui-radius-md: 8px;
    --ui-radius-lg: 12px;
    --ui-shadow-sm: 0 1px 2px rgba(0, 0, 0, .05);
    --ui-shadow-md: 0 10px 28px -10px rgba(0, 0, 0, .2);
    --ui-shadow-lg: 0 24px 56px -16px rgba(0, 0, 0, .3);
    --ui-ease: cubic-bezier(.2, .7, .2, 1);
    --ui-display: 'Instrument Serif', Georgia, 'Times New Roman', serif;
    --ui-font: 'DM Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --ui-mono: ui-monospace, 'SF Mono', 'Cascadia Code', Consolas, 'Liberation Mono', Menlo, monospace;

    /* Density: the single place to retune how compact the app is. */
    --ui-space-card: 1.125rem;
    --ui-space-card-y: .75rem;
    --ui-space-stack: 1rem;
    --ui-space-inline: .625rem;
    /* One height for the controls in a card header (buttons, fields, the range presets). */
    --ui-control-h: 2.125rem;
}

[data-theme="dark"] {
    color-scheme: dark;

    --ui-bg: #111111;
    --ui-surface: #191919;
    --ui-surface-2: #202020;
    --ui-inset: #141414;
    --ui-hover: #2a2a2a;

    --ui-line: #2a2a2a;
    --ui-line-strong: #3d3d3d;
    --ui-line-hover: #5a5a5a;

    --ui-text: #ededed;
    --ui-text-2: #b4b4b4;
    --ui-text-3: #8f8f8f;

    --ui-accent-2: #ffb84d;
    --ui-accent-line: #ffb84d;
    --ui-accent-text: #ff9900;
    --ui-accent-soft: rgba(255, 153, 0, .12);

    --ui-good: #4ade80;
    --ui-bad: #f87171;
    --ui-warn: #fbbf24;
    --ui-info: #60a5fa;
    --ui-violet: #a78bfa;
    --ui-link: #8ab8ff;
}