/* ==========================================================================
   ValueStats · Design tokens
   Canonical visual values for the redesigned UI. Page styles should consume
   these variables directly or expose a page-scoped alias when migrating.
   ========================================================================== */

:root {
    color-scheme: light;

    /* Brand */
    --vs-color-primary: #087a55;
    --vs-color-primary-strong: #075f45;
    --vs-color-primary-emphasis: #087a55;
    --vs-color-primary-soft: rgba(21, 150, 106, .10);
    --vs-color-focus: rgba(21, 150, 106, .20);

    /* Neutral surfaces */
    --vs-color-canvas: #eef2ef;
    --vs-color-surface: #ffffff;
    --vs-color-surface-muted: #f4f7f5;
    --vs-color-surface-raised: #ffffff;
    --vs-color-border: #d3ded8;
    --vs-color-border-strong: #c3d1ca;
    --vs-color-ink: #142019;
    --vs-color-muted: #68786f;

    /* Shape and elevation: intentionally restrained, not pill-heavy. */
    --vs-radius-control: .3rem;
    --vs-radius-panel: .52rem;
    --vs-radius-media: .4rem;
    --vs-shadow-panel: 0 8px 24px rgba(25, 45, 35, .055), 0 1px 2px rgba(25, 45, 35, .04);
    --vs-shadow-floating: 0 18px 48px rgba(3, 18, 13, .18);

    /* Shared layout rhythm. */
    --vs-layout-gutter: clamp(.75rem, 1.7vw, 1.5rem);
    --vs-layout-section-gap: .75rem;
}

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

    --vs-color-primary: #13a875;
    --vs-color-primary-strong: #6ee7b7;
    --vs-color-primary-emphasis: #34d399;
    --vs-color-primary-soft: rgba(52, 211, 153, .10);
    --vs-color-focus: rgba(110, 231, 183, .24);

    --vs-color-canvas: #09130f;
    --vs-color-surface: #101d17;
    --vs-color-surface-muted: #0c1813;
    --vs-color-surface-raised: #14231c;
    --vs-color-border: #2a4035;
    --vs-color-border-strong: #344a3e;
    --vs-color-ink: #e5eee9;
    --vs-color-muted: #91a39a;

    --vs-shadow-panel: 0 10px 28px rgba(0, 0, 0, .20);
    --vs-shadow-floating: 0 20px 54px rgba(0, 0, 0, .44);
}