/**
 * Site tokens — this is the website's own design language, NOT the harness's.
 *
 * The harness's real tokens live in `dsh-tokens.css` and are used only inside
 * component previews (that is the point: a preview must render with the
 * product's own values, or it is a drawing rather than a specimen).
 *
 * Typography leads with HarmonyOS Sans, the family the spacing and motion
 * scales here are borrowed from; it degrades to the platform UI font elsewhere.
 *
 * Both themes are authored, not derived: a value that merely "looks fine" in
 * light mode and collapses in dark mode is a defect here.
 */

@property --nav-w {
    syntax: '<length>';
    inherits: true;
    initial-value: 268px;
}

@property --aside-w {
    syntax: '<length>';
    inherits: true;
    initial-value: 348px;
}

:root {
    /* type */
    --site-font: 'HarmonyOS Sans SC', 'HarmonyOS Sans', -apple-system, BlinkMacSystemFont,
        'Segoe UI', 'Microsoft YaHei', 'PingFang SC', 'Noto Sans SC', sans-serif;
    --site-font-mono: 'JetBrains Mono', 'SF Mono', 'Cascadia Mono', Consolas, 'Courier New', monospace;

    --site-text-hero: 52px;
    --site-text-page-title: 36px;
    --site-text-title: 30px;
    --site-text-section: 21px;
    --site-text-card: 16px;
    --site-text-body: 15px;
    --site-text-note: 13px;
    --site-text-micro: 11px;

    /* spacing — 4/8 multiples, the same scale the spec hands to plugin authors */
    --site-s1: 4px;
    --site-s2: 8px;
    --site-s3: 12px;
    --site-s4: 16px;
    --site-s5: 24px;
    --site-s6: 32px;
    --site-s7: 48px;
    --site-s8: 64px;
    --site-s9: 96px;

    --site-radius-s: 8px;
    --site-radius-m: 12px;
    --site-radius-l: 18px;
    --site-radius-xl: 24px;

    --site-topbar: 52px;
    --site-rail-w: 12px;

    --site-ease: cubic-bezier(0.4, 0, 0.2, 1);
    --site-dur-fast: 120ms;
    --site-dur: 200ms;
    --site-dur-slow: 340ms;
}

/* ── light ─────────────────────────────────────────────────────────── */
:root {
    --site-bg: #ffffff;
    --site-bg-subtle: #f4f4f6;
    --site-bg-raised: #ffffff;
    --site-bg-sunken: #f7f7f9;
    --site-bg-code: #f6f6f8;
    --site-bg-stage: #ffffff;
    --site-label: #1d1d1f;
    --site-label-2: #5f6062;
    --site-label-3: #86868b;
    --site-line: #d6d6db;
    --site-line-soft: #ebebef;
    --site-accent: #4d6bfe;
    --site-accent-soft: #edf0ff;
    --site-accent-ink: #2b47c9;
    --site-good: #14663c;
    --site-warn: #8a5a00;
    --site-bad: #b3271f;
    --site-good-soft: #e6f4ec;
    --site-warn-soft: #fdf1dd;
    --site-bad-soft: #fdeae8;
    --site-rail: #c9c9cf;
    --site-rail-hover: #a8a8b0;
    --site-glass: rgb(255 255 255 / 66%);
    --site-glass-edge: rgb(0 0 0 / 6%);
    --site-glass-sheen: rgb(255 255 255 / 70%);
    --site-shadow: 0 1px 2px rgb(0 0 0 / 4%), 0 8px 24px rgb(0 0 0 / 6%);
    --site-shadow-lift: 0 2px 4px rgb(0 0 0 / 5%), 0 18px 44px rgb(0 0 0 / 12%);
    --site-swatch-edge: rgb(0 0 0 / 10%);
    --color-scheme: light;
}

/* ── dark ──────────────────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme='light']) {
        --site-bg: #0c0c0d;
        --site-bg-subtle: #1a1a1c;
        --site-bg-raised: #1c1c1f;
        --site-bg-sunken: #131315;
        --site-bg-code: #17171a;
        --site-bg-stage: #1a1a1d;
        --site-label: #f2f2f4;
        --site-label-2: #a8a8ae;
        --site-label-3: #8a8a90;
        --site-line: #3a3a3f;
        --site-line-soft: #26262a;
        --site-accent: #8296ff;
        --site-accent-soft: #1a1f3d;
        --site-accent-ink: #aab7ff;
        --site-good: #5fd39a;
        --site-warn: #e3b75f;
        --site-bad: #f5827a;
        --site-good-soft: #10261a;
        --site-warn-soft: #2a2113;
        --site-bad-soft: #2b1715;
        --site-rail: #38383d;
        --site-rail-hover: #55555c;
        --site-glass: rgb(18 18 20 / 62%);
        --site-glass-edge: rgb(255 255 255 / 8%);
        --site-glass-sheen: rgb(255 255 255 / 6%);
        --site-shadow: 0 1px 2px rgb(0 0 0 / 50%), 0 10px 28px rgb(0 0 0 / 40%);
        --site-shadow-lift: 0 2px 6px rgb(0 0 0 / 55%), 0 20px 50px rgb(0 0 0 / 55%);
        --site-swatch-edge: rgb(255 255 255 / 14%);
        --color-scheme: dark;
    }
}

:root[data-theme='dark'] {
    --site-bg: #0c0c0d;
    --site-bg-subtle: #1a1a1c;
    --site-bg-raised: #1c1c1f;
    --site-bg-sunken: #131315;
    --site-bg-code: #17171a;
    --site-bg-stage: #1a1a1d;
    --site-label: #f2f2f4;
    --site-label-2: #a8a8ae;
    --site-label-3: #8a8a90;
    --site-line: #3a3a3f;
    --site-line-soft: #26262a;
    --site-accent: #8296ff;
    --site-accent-soft: #1a1f3d;
    --site-accent-ink: #aab7ff;
    --site-good: #5fd39a;
    --site-warn: #e3b75f;
    --site-bad: #f5827a;
    --site-good-soft: #10261a;
    --site-warn-soft: #2a2113;
    --site-bad-soft: #2b1715;
    --site-rail: #38383d;
    --site-rail-hover: #55555c;
    --site-glass: rgb(18 18 20 / 62%);
    --site-glass-edge: rgb(255 255 255 / 8%);
    --site-glass-sheen: rgb(255 255 255 / 6%);
    --site-shadow: 0 1px 2px rgb(0 0 0 / 50%), 0 10px 28px rgb(0 0 0 / 40%);
    --site-shadow-lift: 0 2px 6px rgb(0 0 0 / 55%), 0 20px 50px rgb(0 0 0 / 55%);
    --site-swatch-edge: rgb(255 255 255 / 14%);
    --color-scheme: dark;
}