/* Evertreen design tokens — the one source for colour, type, spacing, radii, elevation and motion.
   Linked by the merchant app (App.razor), the impact board (ImpactBoard.cs), the /connect and
   result pages (Crm/CrmPages.cs) and /admin. Change a value here and every surface follows.
   Typeface: Onest 400 (body), 500 (labels, buttons, tabs, pills), 700 (titles, numbers) — the
   only three weights loaded anywhere. */

:root {
    /* colour roles */
    --c-bg: #f3f3f1;
    --c-surface: #ffffff;
    --c-surface-subtle: #f8f8f6;
    --c-surface-hover: #f5f6f3;
    --c-surface-pressed: #eef0ec;
    --c-brand: #006628;
    --c-brand-deep: #1b4427;
    --c-brand-mid: #008636;
    --c-action: #008636;
    --c-action-hover: #00702d;
    --c-action-pressed: #006628;
    --c-lime: #cbe08d;
    --c-lime-subtle: #eef5d6;
    --c-mint: #d1e2d8;
    --c-mint-subtle: #ebf3ee;
    --c-text: #1b4427;
    --c-text-body: #2e3b34;
    --c-text-muted: #5e6b64;
    --c-text-disabled: #9aa39e;
    --c-text-on-brand: #ffffff;
    --c-text-on-brand-muted: rgba(255, 255, 255, .80);
    --c-border: #dfe2dd;
    --c-border-subtle: #ebede9;
    --c-border-strong: #c9cec7;

    /* status (bg / fg) */
    --c-success-bg: #d1e2d8;  --c-success-fg: #00552a;
    --c-neutral-bg: #ebede9;  --c-neutral-fg: #4a5650;
    --c-warning-bg: #fbf3cf;  --c-warning-fg: #6b5200;
    --c-critical-bg: #fdecea; --c-critical-fg: #b42318;
    --c-info-bg: #e8eef6;     --c-info-fg: #2b4a73;

    /* spacing */
    --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px;
    --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px;

    /* radii */
    --r-xs: 6px;     /* chips inside inputs, kbd */
    --r-sm: 10px;    /* inputs, selects, toolbar buttons, list rows */
    --r-md: 16px;    /* cards, sections, tiles, embedded board */
    --r-lg: 20px;    /* hero, public board banner and cards */
    --r-pill: 999px; /* buttons, pills, tabs */

    /* elevation */
    --e-card: 0 0 0 1px rgba(27, 68, 39, .06), 0 1px 2px rgba(27, 68, 39, .06);
    --e-raised: 0 0 0 1px rgba(27, 68, 39, .06), 0 6px 20px rgba(27, 68, 39, .10);
    --e-overlay: 0 0 0 1px rgba(27, 68, 39, .06), 0 16px 40px rgba(27, 68, 39, .18);
    --focus-ring: 0 0 0 2px #fff, 0 0 0 4px var(--c-action);
    --input-ring: 0 0 0 3px rgba(0, 134, 54, .16);

    /* motion */
    --dur-1: 120ms; --dur-2: 200ms; --dur-3: 320ms;
    --ease-out: cubic-bezier(.2, .8, .2, 1);
    --ease-in-out: cubic-bezier(.4, 0, .2, 1);

    /* type: weight size/line-height family (use with `font:`) */
    --font: 'Onest', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --t-display: 700 40px/44px var(--font);
    --t-h1: 700 24px/32px var(--font);
    --t-h2: 700 17px/24px var(--font);
    --t-h3: 700 15px/22px var(--font);
    --t-stat: 700 28px/32px var(--font);
    --t-body: 400 14px/20px var(--font);
    --t-body-strong: 500 14px/20px var(--font);
    --t-hint: 400 13px/18px var(--font);
    --t-label: 500 13px/18px var(--font);
    --t-label-sm: 500 12px/16px var(--font);
    --t-caption: 400 12px/16px var(--font);
    --t-eyebrow: 500 11px/16px var(--font);
    --tr-display: -0.025em; --tr-h1: -0.015em; --tr-h2: -0.01em; --tr-stat: -0.02em; --tr-eyebrow: 0.06em;
}

@media (max-width: 760px) {
    :root {
        --t-display: 700 32px/36px var(--font);
        --t-h1: 700 20px/28px var(--font);
        --t-stat: 700 24px/28px var(--font);
    }
}

@keyframes ev-shimmer { from { background-position: -320px 0; } to { background-position: calc(320px + 100%) 0; } }
@keyframes ev-enter { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes ev-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes ev-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
    .ev-skel, .skel { animation: none !important; }
}
