/*
 * eSales V2 design tokens — indigo/zinc palette (CLIENT_V2_PLAN.md §2.6 structure).
 * Light values on :root, dark values on .dark (class strategy, set by ThemeService).
 * All contrast pairs validated >= 4.5:1 (body) / 3:1 (large text, icons).
 */

:root {
    /* Brand ramp (indigo) — primary is #4F46E5 in light mode */
    --brand-50: #EEF2FF;
    --brand-100: #E0E7FF;
    --brand-200: #C7D2FE;
    --brand-300: #A5B4FC;
    --brand-400: #818CF8;
    --brand-500: #6366F1;
    --brand-600: #4F46E5;
    --brand-700: #4338CA;
    --brand-800: #3730A3;
    --brand-900: #312E81;
    --brand-primary: #4F46E5;
    --brand-primary-contrast: #FFFFFF;
    /* Accent = text/link/icon color on surfaces; hover/active = interaction states
       of filled controls. Split from primary so dark mode can lighten instead of
       darken (saturated indigo text fringes on dark backgrounds; see brand-300 note). */
    --brand-accent: #4F46E5;
    --brand-hover: #4338CA;
    --brand-active: #3730A3;
    --brand-state-contrast: #FFFFFF;

    /* Surfaces (zinc-neutral) */
    --surface-0: #FFFFFF; /* page */
    --surface-1: #FAFAFB; /* cards */
    --surface-2: #EFEFF3; /* raised/sheets */

    /* Ink (text) */
    --ink-1: #18181B;
    --ink-2: #52525B;
    --ink-3: #A1A1AA;

    /* Status */
    /* Height of every toolbar-row control: search inputs, selects, icon buttons,
       toolbar text buttons and the dense tab pill. One edit retunes list density.
       Not themed - the same in light and dark. */
    --control-h: 2.25rem;

    --positive: #15803D;
    --warning: #B45309;
    --critical: #B91C1C;

    /* Filled-control variant of positive: status tokens above are tuned for text/icons
       on surfaces (dark mode lightens them), which glares when used as a button fill.
       The fill pair stays mid-saturation in both modes. */
    --positive-fill: #15803D;
    --positive-fill-contrast: #FFFFFF;
}

.dark {
    /* Brand ramp — primary is #6366F1 in dark mode */
    --brand-primary: #6366F1;
    --brand-primary-contrast: #FFFFFF;
    /* Text-level accent lightened to brand-300 (readable on surface-0); interaction
       states go lighter, not darker, per Material dark-theme guidance. */
    --brand-accent: #A5B4FC;
    --brand-hover: #818CF8;
    --brand-active: #A5B4FC;
    --brand-state-contrast: #1E1B4B;

    /* Surfaces (zinc-neutral dark) */
    --surface-0: #101014; /* page */
    --surface-1: #17171D; /* cards */
    --surface-2: #232330; /* raised/sheets */

    /* Ink (text) */
    --ink-1: #E4E4E7;
    --ink-2: #A1A1AA;
    --ink-3: #64646E;

    /* Status */
    --positive: #4ADE80;
    --warning: #FBBF24;
    --critical: #F87171;

    /* One step brighter than light mode's fill, far calmer than --positive (#4ADE80) */
    --positive-fill: #16A34A;
    --positive-fill-contrast: #FFFFFF;
}

/*
 * Motion tokens (theme-independent — motion reads the same in light and dark).
 * The scale is deliberately short: this is a warehouse tool driven by a scanner all
 * shift, so motion exists to explain a state change, never to decorate. Anything
 * that would make a user wait on an animation before their next scan is too slow.
 *
 * The reduce block below is the single kill switch for the whole app: every motion
 * utility in site.css derives its duration from these variables, so collapsing them
 * here settles each effect on its final frame instantly (all keyframes use `both`).
 */
:root {
    --motion-fast: 120ms;  /* state echoes: colour, badge pop, press feedback */
    --motion-base: 180ms;  /* the default — panels, toasts, list rows */
    --motion-slow: 260ms;  /* travel-heavy: bottom sheets, drawers */

    /* Decelerate for things arriving, accelerate for things leaving, standard for
       two-way property transitions that can be interrupted mid-flight. */
    --motion-enter: cubic-bezier(0.16, 1, 0.3, 1);
    --motion-exit: cubic-bezier(0.4, 0, 1, 1);
    --motion-standard: cubic-bezier(0.4, 0, 0.2, 1);

    /* Travel distance for the rise-in family. Small on purpose: at 6px the eye reads
       "this is new" without the row visibly sliding into place. */
    --motion-rise: 6px;
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --motion-fast: 0.01ms;
        --motion-base: 0.01ms;
        --motion-slow: 0.01ms;
    }
}