/* One Design System tokens.
 *
 * This file is the single global definition of the MACFai One visual
 * language: colour, typography, spacing, radii, elevation, motion, layering
 * and breakpoints. It is served from `one_ui`, not from any Application, so
 * that an Application can compose surfaces with these tokens but cannot
 * redefine the language every Application shares.
 *
 * An Application styles its own pages with `var(--one-*)`. Declaring a new
 * global token, a new shell or a new palette is a change to One, made here.
 */

:root {
    color-scheme: light;

    /* -- palette ---------------------------------------------------- */
    --one-bg: #f4f8fc;
    --one-surface: #ffffff;
    --one-surface-soft: #f1f6fb;
    --one-surface-strong: #e8f0f8;
    --one-text: #111827;
    --one-muted: #607089;
    --one-line: #d6e1ed;
    --one-line-strong: #bdcde0;
    --one-accent: #0875e1;
    --one-accent-dark: #055fc1;
    --one-accent-soft: #e6f2ff;
    --one-success: #0ea89a;
    --one-warning: #e69b20;
    --one-danger: #c8324a;
    --one-on-accent: #ffffff;

    /* -- typography ------------------------------------------------- */
    /* Every face here is one the browser already has. Naming a webfont One does
       not ship — there is no @font-face anywhere, and `font-src` is 'self' —
       only meant the stack silently fell through to the next entry on every
       machine that did not happen to have it installed. */
    --one-font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
        Roboto, "Helvetica Neue", Arial, sans-serif;
    --one-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
    --one-text-xs: .7rem;
    --one-text-sm: .78rem;
    --one-text-md: .9rem;
    --one-text-lg: 1.12rem;
    --one-text-xl: 1.5rem;
    --one-weight-regular: 400;
    --one-weight-medium: 600;
    --one-weight-strong: 800;

    /* -- spacing and shape ------------------------------------------ */
    --one-space-1: 4px;
    --one-space-2: 8px;
    --one-space-3: 12px;
    --one-space-4: 16px;
    --one-space-5: 24px;
    --one-space-6: 32px;
    --one-radius-sm: 9px;
    --one-radius: 14px;
    --one-radius-pill: 999px;
    --one-shadow: 0 14px 34px rgba(32, 70, 108, .10);
    --one-motion: .18s ease;

    /* -- layering ---------------------------------------------------- */
    --one-z-content: 1;
    --one-z-overlay-inline: 500;
    --one-z-topbar: 1000;
    --one-z-scrim: 1050;
    --one-z-drawer: 1100;
    --one-z-modal: 1200;

    /* -- breakpoints (read by scripts; media queries inline them) ----- */
    --one-breakpoint-compact: 700px;
    --one-breakpoint-medium: 980px;

    font-family: var(--one-font-sans);
}

/* Three states, not two: an explicit choice stamps data-theme, and the default
 * "system" setting stamps nothing at all. The media query answers for the
 * unstamped document — guarded so an explicit light choice still beats a dark
 * OS — and the attribute rule answers for the toggle. Without the first one the
 * server-rendered page was light until JavaScript had run, which on a
 * multi-page app meant a white flash on every single navigation. */
@media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]) {
        color-scheme: dark;
        --one-bg: #050c14;
        --one-surface: #0e192b;
        --one-surface-soft: #111e32;
        --one-surface-strong: #17263c;
        --one-text: #f7f9fc;
        --one-muted: #9aa9bd;
        --one-line: #253650;
        --one-line-strong: #344963;
        --one-accent: #3195ff;
        --one-accent-dark: #197cdc;
        --one-accent-soft: #102d4d;
        --one-success: #36cdbd;
        --one-warning: #f0b352;
        --one-danger: #ff7187;
        --one-shadow: 0 18px 46px rgba(0, 0, 0, .28);
    }
}

html[data-theme="dark"] {
    color-scheme: dark;
    --one-bg: #050c14;
    --one-surface: #0e192b;
    --one-surface-soft: #111e32;
    --one-surface-strong: #17263c;
    --one-text: #f7f9fc;
    --one-muted: #9aa9bd;
    --one-line: #253650;
    --one-line-strong: #344963;
    --one-accent: #3195ff;
    --one-accent-dark: #197cdc;
    --one-accent-soft: #102d4d;
    --one-success: #36cdbd;
    --one-warning: #f0b352;
    --one-danger: #ff7187;
    --one-shadow: 0 18px 46px rgba(0, 0, 0, .28);
}