/**
 * Semantic Hub design tokens.
 * F0 foundation. Load before reset, layout and components.
 * Reference values and deliberate adjustments: docs/global-interface.md.
 */
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("../fonts/inter-vietnamese.woff2") format("woff2");
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("../fonts/inter-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    color-scheme: light;

    /* Reference identity: light surfaces, blue links, amber giftcode header. */
    --hub-color-canvas: #f2f3f5;
    --hub-color-surface: #ffffff;
    --hub-color-surface-muted: #f9f9fb;
    --hub-color-text: #141617;
    --hub-color-text-muted: #545b66;
    --hub-color-border: #dfe3e8;
    --hub-color-border-strong: #8c96a3;
    --hub-color-brand: #198fd9;
    --hub-color-link: #09659f;
    --hub-color-link-hover: #074b77;
    --hub-color-accent: #fbc02d;
    --hub-color-accent-hover: #edb021;
    --hub-color-on-accent: #141617;
    --hub-color-accent-soft: #fff8dd;
    --hub-color-accent-text: #765000;
    --hub-color-success: #216e39;
    --hub-color-success-soft: #edf8ef;
    --hub-color-danger: #b42318;
    --hub-color-danger-soft: #fff1f0;
    --hub-color-info-soft: #edf6fc;
    --hub-color-focus: #0759b8;
    --hub-color-focus-inverse: #8fc8ff;
    --hub-color-footer: #212326;
    --hub-color-footer-text: #e0e3e8;
    --hub-color-footer-muted: #b3bac4;
    --hub-color-overlay: rgb(20 22 23 / 55%);

    /* Self-hosted Inter includes Vietnamese; fallbacks remain usable offline. */
    --hub-font-sans: "Inter", Arial, Helvetica, sans-serif;
    --hub-font-heading: var(--hub-font-sans);
    --hub-font-mono: "Cascadia Code", Consolas, "Courier New", monospace;
    --hub-text-xs: 0.8125rem;
    --hub-text-sm: 0.875rem;
    --hub-text-base: 1rem;
    --hub-text-lg: 1.125rem;
    --hub-text-h1: clamp(1.625rem, 1.5rem + 0.5vw, 1.75rem);
    --hub-text-h2: clamp(1.375rem, 1.25rem + 0.5vw, 1.625rem);
    --hub-text-h3: clamp(1.1875rem, 1.0625rem + 0.5vw, 1.4375rem);
    --hub-text-stat: 1.75rem;
    --hub-weight-normal: 400;
    --hub-weight-medium: 500;
    --hub-weight-semibold: 600;
    --hub-weight-bold: 700;
    --hub-leading-body: 1.7;
    --hub-leading-heading: 1.3;
    --hub-leading-control: 1.4;

    /* Four-pixel rhythm; rem units respect the reader's text settings. */
    --hub-space-1: 0.25rem;
    --hub-space-2: 0.5rem;
    --hub-space-3: 0.75rem;
    --hub-space-4: 1rem;
    --hub-space-5: 1.25rem;
    --hub-space-6: 1.5rem;
    --hub-space-8: 2rem;
    --hub-space-10: 2.5rem;
    --hub-space-12: 3rem;
    --hub-space-15: 3.75rem;
    --hub-space-16: 4rem;

    --hub-container-max: 75rem;
    --hub-reading-max: 48rem;
    --hub-sidebar-width: 17.5rem;
    --hub-layout-gap: 2rem;
    --hub-page-gutter: clamp(1rem, 3vw, 2rem);
    --hub-page-padding: clamp(1.5rem, 4vw, 3.75rem);
    --hub-header-height: 5rem;
    --hub-control-min: 2.75rem;
    --hub-scroll-offset: 1.5rem;

    --hub-radius-sm: 0.25rem;
    --hub-radius-md: 0.5rem;
    --hub-radius-lg: 0.75rem;
    --hub-radius-pill: 999px;
    --hub-border-width: 1px;
    --hub-shadow-sm: 0 2px 8px rgb(20 22 23 / 4%);
    --hub-shadow-md: 0 8px 24px rgb(20 22 23 / 8%);
    --hub-shadow-dialog: 0 24px 80px rgb(20 22 23 / 20%);
    --hub-focus-width: 3px;
    --hub-focus-offset: 3px;
    --hub-motion-fast: 120ms;
    --hub-motion-normal: 180ms;
    --hub-ease: ease-out;
    --hub-layer-header: 20;
    --hub-layer-toast: 40;
}

/* Match these values in CSS media queries and matchMedia in scripts.
 * Compact: <= 39.99rem. One column: < 64rem. Wide: >= 64rem.
 * CSS custom properties cannot be used as media-query conditions.
 */
@media (prefers-reduced-motion: reduce) {
    :root {
        --hub-motion-fast: 0ms;
        --hub-motion-normal: 0ms;
    }
}