/* ===================================================================
   Design tokens. Components read these, never a raw hex value.
   See design-system/client-onboarding/MASTER.md for the reasoning.
   =================================================================== */

:root {
    /* --- Surfaces ------------------------------------------------- */
    --surface-page:    #f5f7f9;
    --surface-card:    #ffffff;
    --surface-sunken:  #eef1f5;
    --surface-raised:  #fbfcfd;

    /* --- Ink ------------------------------------------------------ */
    --ink-900: #111820;
    --ink-700: #39434f;
    --ink-500: #68727f;
    --ink-400: #8b95a1;   /* placeholder / disabled only, never information */

    /* --- Lines ---------------------------------------------------- */
    --line:        #e1e6ec;
    --line-strong: #c9d2dc;

    /* --- Brand ---------------------------------------------------- */
    --primary:       #1c3d5a;
    --primary-hover: #16324a;
    --primary-soft:  #e8eef4;
    --primary-ink:   #ffffff;

    /* --- Semantic status ------------------------------------------ */
    --success:      #0f7a4d;
    --success-soft: #e4f4ec;
    --warning:      #9a5b00;
    --warning-soft: #fdf1de;
    --danger:       #b42318;
    --danger-soft:  #fdeceb;
    --danger-hover: #99190f;
    --neutral:      #5b6673;
    --neutral-soft: #eceff3;

    /* --- Chart series: separated by value, not only by hue, so the
           series stay distinguishable in greyscale ------------------ */
    --chart-1: #1c3d5a;
    --chart-2: #a8bccd;
    --chart-3: #2a7f7a;
    --chart-4: #c2810a;
    --chart-grid: #e1e6ec;

    /* --- Spacing: dense-dashboard scale --------------------------- */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;

    /* --- Radius --------------------------------------------------- */
    --radius-sm: 4px;
    --radius-md: 5px;
    --radius-lg: 6px;

    /* --- Elevation: exactly two, plus a border on everything ------ */
    --shadow-card:  0 1px 2px rgba(17, 24, 32, .06);
    --shadow-float: 0 6px 20px rgba(17, 24, 32, .12), 0 2px 6px rgba(17, 24, 32, .06);

    /* --- Type ----------------------------------------------------- */
    --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                 "Helvetica Neue", Arial, "Noto Sans", sans-serif;

    --text-xs:   12px;
    --text-sm:   13px;
    --text-base: 14px;
    --text-md:   16px;
    --text-lg:   20px;
    --text-xl:   26px;
    --text-2xl:  34px;

    /* --- Motion: one duration for entrances, a shorter one for exits,
           because a thing leaving should not hold the user up ------- */
    --ease: cubic-bezier(.2, .7, .3, 1);
    --dur-in:  160ms;
    --dur-out: 120ms;

    --rail-width: 232px;
    --topbar-height: 56px;
}

/* Motion is decoration here; information never depends on it. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}