/* ══════════════════════════════════════════════════════════════
   DCC Design Tokens — v3.0.0
   Single source of truth for scale / motion / elevation / layering.
   Load order: dcc-tokens.css → device-control.css → equipment-control-layout.css
   ══════════════════════════════════════════════════════════════ */

:root {
    /* ── spacing: 4px base grid ─────────────────────────────── */
    --dcc-s-1: .25rem; /*  4 */
    --dcc-s-2: .5rem; /*  8 */
    --dcc-s-3: .75rem; /* 12 */
    --dcc-s-4: 1rem; /* 16 */
    --dcc-s-5: 1.25rem; /* 20 */
    --dcc-s-6: 1.5rem; /* 24 */
    --dcc-s-7: 2rem; /* 32 */
    --dcc-s-8: 2.5rem; /* 40 */
    /* ── type: 5-step scale (no in-between values) ──────────── */
    --dcc-fs-2xs: .6875rem; /* 11 — counters, topics */
    --dcc-fs-xs: .75rem; /* 12 — captions, tags */
    --dcc-fs-sm: .8125rem; /* 13 — tabs, chips, inputs */
    --dcc-fs-md: .875rem; /* 14 — body */
    --dcc-fs-lg: 1rem; /* 16 — panel title */
    --dcc-fs-xl: 1.125rem; /* 18 — section hero */
    --dcc-fs-hero: clamp(1.125rem, 1rem + 1.1vw, 1.5rem);
    --dcc-lh-tight: 1.25;
    --dcc-lh-base: 1.55;
    --dcc-lh-loose: 1.8;
    --dcc-tracking-caps: .12em;
    /* ── radius: nested geometry (inner = outer − padding) ───── */
    --dcc-r-xs: 8px;
    --dcc-r-sm: 12px;
    --dcc-r-md: 16px;
    --dcc-r-lg: 22px;
    --dcc-r-xl: 28px;
    --dcc-r-pill: 999px;
    /* ── control sizing: 3 steps only ───────────────────────── */
    --dcc-h-sm: 32px;
    --dcc-h-md: 38px;
    --dcc-h-lg: 44px; /* mobile primary — WCAG 2.5.5 */
    --dcc-tap: 44px;
    /* ── motion: duration ───────────────────────────────────── */
    --dcc-t-instant: 90ms; /* press feedback   */
    --dcc-t-fast: 140ms; /* exit / hover-out */
    --dcc-t-base: 200ms; /* hover-in / color */
    --dcc-t-slow: 280ms; /* enter, layout    */
    --dcc-t-xslow: 420ms; /* gauge sweep      */
    /* ── motion: easing ─────────────────────────────────────── */
    --dcc-e-out: cubic-bezier(.22, 1, .36, 1); /* enter        */
    --dcc-e-in: cubic-bezier(.4, 0, 1, 1); /* exit         */
    --dcc-e-std: cubic-bezier(.4, 0, .2, 1); /* color/opacity*/
    --dcc-e-spring: cubic-bezier(.34, 1.4, .64, 1); /* emphasis     */
    /* ── elevation ──────────────────────────────────────────── */
    --dcc-el-1: 0 1px 2px rgba(15, 23, 42, .06), 0 2px 8px rgba(15, 23, 42, .04);
    --dcc-el-2: 0 2px 4px rgba(15, 23, 42, .05), 0 8px 24px rgba(15, 23, 42, .07);
    --dcc-el-3: 0 4px 8px rgba(15, 23, 42, .06), 0 18px 48px rgba(15, 23, 42, .12);
    --dcc-el-4: 0 8px 16px rgba(15, 23, 42, .08), 0 32px 80px rgba(15, 23, 42, .18);
    /* ── layering ───────────────────────────────────────────── */
    --dcc-z-base: 1;
    --dcc-z-sticky: 90;
    --dcc-z-dock: 95;
    --dcc-z-header: 100;
    --dcc-z-sheet: 1050;
    --dcc-z-toast: 12000;
    /* ── palette (brand) ────────────────────────────────────── */
    --dcc-accent: #10b981;
    --dcc-accent-2: #06b6d4;
    --dcc-warn: #f59e0b;
    --dcc-ok: #22c55e;
    --dcc-err: #f1416c;
}

[data-bs-theme="dark"] {
    --dcc-el-1: 0 1px 2px rgba(0, 0, 0, .4), 0 2px 8px rgba(0, 0, 0, .28);
    --dcc-el-2: 0 2px 4px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .38);
    --dcc-el-3: 0 4px 8px rgba(0, 0, 0, .45), 0 18px 48px rgba(0, 0, 0, .5);
    --dcc-el-4: 0 8px 16px rgba(0, 0, 0, .5), 0 32px 80px rgba(0, 0, 0, .62);
}