/* Signage tokens — generated from tokens.json (W3C DTCG).
   Naming: JSON path → CSS custom property. color.status.offline.fg → --color-status-offline-fg
   Typography composites expand to -size, -line, -weight, -tracking, (-numeric) and a font shorthand: font: var(--type-tv-body);
   Themes: light on :root / [data-theme="light"], dark on [data-theme="dark"].
   Brand: SignageBrand.apply(el, hex, theme) overwrites --color-brand-* on el at runtime (see brand.js).
   Motion: prefers-reduced-motion or [data-motion="reduced"] → opacity-only, short. */

:root {
  --color-neutral-0: #FFFFFF;
  --color-neutral-50: #F6F7F9;
  --color-neutral-100: #EDEFF2;
  --color-neutral-200: #DDE1E6;
  --color-neutral-300: #C4CAD2;
  --color-neutral-400: #9AA2AE;
  --color-neutral-500: #6B7380;
  --color-neutral-600: #565E6A;
  --color-neutral-700: #3E4550;
  --color-neutral-800: #2A3039;
  --color-neutral-900: #1A1F26;
  --color-neutral-950: #0F1217;
  --color-blue-100: #E8EEFB;
  --color-blue-300: #8EADF5;
  --color-blue-600: #2B59C3;
  --color-blue-900: #1B2742;
  --color-green-100: #E3F3EA;
  --color-green-300: #6FCF97;
  --color-green-600: #1B7044;
  --color-green-900: #15301F;
  --color-amber-100: #FDF3DC;
  --color-amber-300: #F2B230;
  --color-amber-700: #8A5300;
  --color-amber-900: #3A2A0A;
  --color-red-100: #FBE6E4;
  --color-red-300: #F28B82;
  --color-red-600: #B8312B;
  --color-red-900: #3D1A18;
  --color-teal-100: #E1F1F6;
  --color-teal-300: #6CC4DF;
  --color-teal-600: #0F6F8F;
  --color-teal-900: #0E2C36;
  --color-brand-base: #2B59C3;
  --color-brand-on: #FFFFFF;
  --font-family-sans: "IBM Plex Sans", "Noto Sans", SamsungOne, Roboto, "Segoe UI", system-ui, sans-serif;
  --font-family-mono: "IBM Plex Mono", "Noto Sans Mono", ui-monospace, monospace;
  --font-weight-regular: 400;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --type-panel-caption-size: 12px;
  --type-panel-caption-line: 16px;
  --type-panel-caption-weight: var(--font-weight-regular);
  --type-panel-caption-tracking: 0px;
  --type-panel-caption: var(--font-weight-regular) 12px/16px var(--font-family-sans);
  --type-panel-small-size: 14px;
  --type-panel-small-line: 20px;
  --type-panel-small-weight: var(--font-weight-regular);
  --type-panel-small-tracking: 0px;
  --type-panel-small: var(--font-weight-regular) 14px/20px var(--font-family-sans);
  --type-panel-label-size: 14px;
  --type-panel-label-line: 20px;
  --type-panel-label-weight: var(--font-weight-semibold);
  --type-panel-label-tracking: 0px;
  --type-panel-label: var(--font-weight-semibold) 14px/20px var(--font-family-sans);
  --type-panel-body-size: 16px;
  --type-panel-body-line: 24px;
  --type-panel-body-weight: var(--font-weight-regular);
  --type-panel-body-tracking: 0px;
  --type-panel-body: var(--font-weight-regular) 16px/24px var(--font-family-sans);
  --type-panel-body-lg-size: 18px;
  --type-panel-body-lg-line: 28px;
  --type-panel-body-lg-weight: var(--font-weight-regular);
  --type-panel-body-lg-tracking: 0px;
  --type-panel-body-lg: var(--font-weight-regular) 18px/28px var(--font-family-sans);
  --type-panel-title-size: 20px;
  --type-panel-title-line: 28px;
  --type-panel-title-weight: var(--font-weight-semibold);
  --type-panel-title-tracking: 0px;
  --type-panel-title: var(--font-weight-semibold) 20px/28px var(--font-family-sans);
  --type-panel-heading-size: 24px;
  --type-panel-heading-line: 32px;
  --type-panel-heading-weight: var(--font-weight-semibold);
  --type-panel-heading-tracking: 0px;
  --type-panel-heading: var(--font-weight-semibold) 24px/32px var(--font-family-sans);
  --type-panel-display-size: 32px;
  --type-panel-display-line: 40px;
  --type-panel-display-weight: var(--font-weight-semibold);
  --type-panel-display-tracking: -0.3px;
  --type-panel-display: var(--font-weight-semibold) 32px/40px var(--font-family-sans);
  --type-tv-caption-size: 48px;
  --type-tv-caption-line: 60px;
  --type-tv-caption-weight: var(--font-weight-regular);
  --type-tv-caption-tracking: 0px;
  --type-tv-caption: var(--font-weight-regular) 48px/60px var(--font-family-sans);
  --type-tv-body-size: 56px;
  --type-tv-body-line: 72px;
  --type-tv-body-weight: var(--font-weight-regular);
  --type-tv-body-tracking: 0px;
  --type-tv-body: var(--font-weight-regular) 56px/72px var(--font-family-sans);
  --type-tv-title-size: 72px;
  --type-tv-title-line: 88px;
  --type-tv-title-weight: var(--font-weight-semibold);
  --type-tv-title-tracking: 0px;
  --type-tv-title: var(--font-weight-semibold) 72px/88px var(--font-family-sans);
  --type-tv-heading-size: 96px;
  --type-tv-heading-line: 112px;
  --type-tv-heading-weight: var(--font-weight-semibold);
  --type-tv-heading-tracking: -0.5px;
  --type-tv-heading: var(--font-weight-semibold) 96px/112px var(--font-family-sans);
  --type-tv-display-size: 120px;
  --type-tv-display-line: 132px;
  --type-tv-display-weight: var(--font-weight-bold);
  --type-tv-display-tracking: -1px;
  --type-tv-display: var(--font-weight-bold) 120px/132px var(--font-family-sans);
  --type-tv-price-size: 72px;
  --type-tv-price-line: 88px;
  --type-tv-price-weight: var(--font-weight-semibold);
  --type-tv-price-tracking: 0px;
  --type-tv-price: var(--font-weight-semibold) 72px/88px var(--font-family-sans);
  --type-tv-price-numeric: tabular-nums lining-nums;
  --type-tv-price-hero-size: 120px;
  --type-tv-price-hero-line: 132px;
  --type-tv-price-hero-weight: var(--font-weight-bold);
  --type-tv-price-hero-tracking: -1px;
  --type-tv-price-hero: var(--font-weight-bold) 120px/132px var(--font-family-sans);
  --type-tv-price-hero-numeric: tabular-nums lining-nums;
  --space-0: 0px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;
  --layout-tv-landscape-width: 1920px;
  --layout-tv-landscape-height: 1080px;
  --layout-tv-landscape-safe-x: 96px;
  --layout-tv-landscape-safe-y: 54px;
  --layout-tv-landscape-columns: 12;
  --layout-tv-landscape-rows: 6;
  --layout-tv-landscape-gutter: 48px;
  --layout-tv-landscape-column: 100px;
  --layout-tv-landscape-row: 122px;
  --layout-tv-portrait-width: 1080px;
  --layout-tv-portrait-height: 1920px;
  --layout-tv-portrait-safe-x: 54px;
  --layout-tv-portrait-safe-y: 96px;
  --layout-tv-portrait-columns: 6;
  --layout-tv-portrait-rows: 12;
  --layout-tv-portrait-gutter: 48px;
  --layout-tv-portrait-column: 122px;
  --layout-tv-portrait-row: 100px;
  --layout-panel-touch-target: 44px;
  --layout-panel-gutter-mobile: 16px;
  --layout-panel-gutter-desktop: 24px;
  --layout-panel-content-max: 1280px;
  --logo-panel-height: 32px;
  --logo-panel-clearspace: 8px;
  --logo-tv-height: 96px;
  --logo-tv-clearspace: 24px;
  --logo-tv-max-width: 400px;
  --radius-none: 0px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;
  --radius-tv-sm: 8px;
  --radius-tv-md: 16px;
  --radius-tv-lg: 24px;
  --border-width-hairline: 1px;
  --border-width-strong: 2px;
  --border-width-focus: 2px;
  --border-width-focus-offset: 2px;
  --border-width-tv-default: 2px;
  --border-width-tv-strong: 4px;
  --motion-duration-panel-fast: 100ms;
  --motion-duration-panel-base: 150ms;
  --motion-duration-panel-slow: 200ms;
  --motion-duration-tv-fade: 400ms;
  --motion-duration-tv-slide: 500ms;
  --motion-duration-tv-crossfade: 600ms;
  --motion-duration-tv-reduced: 200ms;
  --motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
  --motion-easing-enter: cubic-bezier(0, 0, 0, 1);
  --motion-easing-exit: cubic-bezier(0.3, 0, 1, 1);
  --motion-easing-tv: cubic-bezier(0.4, 0, 0.2, 1);
  --motion-distance-panel-nudge: 4px;
  --motion-distance-tv-slide: 48px;
}

:root, [data-theme="light"] {
  color-scheme: light;
  --color-bg-canvas: var(--color-neutral-50);
  --color-bg-surface: var(--color-neutral-0);
  --color-bg-raised: var(--color-neutral-0);
  --color-bg-sunken: var(--color-neutral-100);
  --color-border-subtle: var(--color-neutral-200);
  --color-border-default: var(--color-neutral-300);
  --color-border-strong: var(--color-neutral-500);
  --color-text-primary: var(--color-neutral-900);
  --color-text-secondary: var(--color-neutral-700);
  --color-text-tertiary: var(--color-neutral-600);
  --color-text-disabled: var(--color-neutral-400);
  --color-text-inverse: var(--color-neutral-0);
  --color-focus: var(--color-blue-600);
  --color-accent-solid: var(--color-blue-600);
  --color-accent-on-solid: var(--color-neutral-0);
  --color-accent-text: var(--color-blue-600);
  --color-accent-subtle: var(--color-blue-100);
  --color-success-solid: var(--color-green-600);
  --color-success-on-solid: var(--color-neutral-0);
  --color-success-text: var(--color-green-600);
  --color-success-subtle: var(--color-green-100);
  --color-warning-solid: var(--color-amber-300);
  --color-warning-on-solid: var(--color-neutral-950);
  --color-warning-text: var(--color-amber-700);
  --color-warning-subtle: var(--color-amber-100);
  --color-danger-solid: var(--color-red-600);
  --color-danger-on-solid: var(--color-neutral-0);
  --color-danger-text: var(--color-red-600);
  --color-danger-subtle: var(--color-red-100);
  --color-info-solid: var(--color-teal-600);
  --color-info-on-solid: var(--color-neutral-0);
  --color-info-text: var(--color-teal-600);
  --color-info-subtle: var(--color-teal-100);
  --color-status-online-fg: var(--color-success-text);
  --color-status-online-bg: var(--color-success-subtle);
  --color-status-offline-fg: var(--color-danger-text);
  --color-status-offline-bg: var(--color-danger-subtle);
  --color-status-out-of-sync-fg: var(--color-warning-text);
  --color-status-out-of-sync-bg: var(--color-warning-subtle);
  --color-status-storage-low-fg: var(--color-warning-text);
  --color-status-storage-low-bg: var(--color-warning-subtle);
  --color-status-drive-disconnected-fg: var(--color-danger-text);
  --color-status-drive-disconnected-bg: var(--color-danger-subtle);
  --color-status-bluetooth-disconnected-fg: var(--color-warning-text);
  --color-status-bluetooth-disconnected-bg: var(--color-warning-subtle);
  --color-brand-hover: color-mix(in srgb, var(--color-brand-base) 88%, #000);
  --color-brand-pressed: color-mix(in srgb, var(--color-brand-base) 78%, #000);
  --color-brand-subtle: color-mix(in srgb, var(--color-brand-base) 12%, var(--color-bg-surface));
  --color-brand-text: var(--color-brand-base);
  --color-tv-bg: var(--color-neutral-50);
  --color-tv-surface: var(--color-neutral-0);
  --color-tv-raised: var(--color-neutral-100);
  --color-tv-text-primary: var(--color-neutral-950);
  --color-tv-text-secondary: var(--color-neutral-700);
  --color-tv-price: var(--color-neutral-950);
  --color-tv-divider: var(--color-neutral-300);
  --color-tv-accent: var(--color-blue-600);
  --elevation-1: 0px 1px 2px 0px #0F12170F, 0px 1px 1px 0px #0F12170A;
  --elevation-2: 0px 4px 12px 0px #0F121714, 0px 1px 3px 0px #0F12170F;
  --elevation-3: 0px 12px 32px 0px #0F12171F, 0px 4px 8px 0px #0F12170F;
}

[data-theme="dark"] {
  color-scheme: dark;
  --color-bg-canvas: var(--color-neutral-950);
  --color-bg-surface: var(--color-neutral-900);
  --color-bg-raised: var(--color-neutral-800);
  --color-bg-sunken: var(--color-neutral-950);
  --color-border-subtle: var(--color-neutral-800);
  --color-border-default: var(--color-neutral-700);
  --color-border-strong: var(--color-neutral-500);
  --color-text-primary: var(--color-neutral-50);
  --color-text-secondary: var(--color-neutral-300);
  --color-text-tertiary: var(--color-neutral-400);
  --color-text-disabled: var(--color-neutral-600);
  --color-text-inverse: var(--color-neutral-950);
  --color-focus: var(--color-blue-300);
  --color-accent-solid: var(--color-blue-600);
  --color-accent-on-solid: var(--color-neutral-0);
  --color-accent-text: var(--color-blue-300);
  --color-accent-subtle: var(--color-blue-900);
  --color-success-solid: var(--color-green-600);
  --color-success-on-solid: var(--color-neutral-0);
  --color-success-text: var(--color-green-300);
  --color-success-subtle: var(--color-green-900);
  --color-warning-solid: var(--color-amber-300);
  --color-warning-on-solid: var(--color-neutral-950);
  --color-warning-text: var(--color-amber-300);
  --color-warning-subtle: var(--color-amber-900);
  --color-danger-solid: var(--color-red-600);
  --color-danger-on-solid: var(--color-neutral-0);
  --color-danger-text: var(--color-red-300);
  --color-danger-subtle: var(--color-red-900);
  --color-info-solid: var(--color-teal-600);
  --color-info-on-solid: var(--color-neutral-0);
  --color-info-text: var(--color-teal-300);
  --color-info-subtle: var(--color-teal-900);
  --color-status-online-fg: var(--color-success-text);
  --color-status-online-bg: var(--color-success-subtle);
  --color-status-offline-fg: var(--color-danger-text);
  --color-status-offline-bg: var(--color-danger-subtle);
  --color-status-out-of-sync-fg: var(--color-warning-text);
  --color-status-out-of-sync-bg: var(--color-warning-subtle);
  --color-status-storage-low-fg: var(--color-warning-text);
  --color-status-storage-low-bg: var(--color-warning-subtle);
  --color-status-drive-disconnected-fg: var(--color-danger-text);
  --color-status-drive-disconnected-bg: var(--color-danger-subtle);
  --color-status-bluetooth-disconnected-fg: var(--color-warning-text);
  --color-status-bluetooth-disconnected-bg: var(--color-warning-subtle);
  --color-brand-hover: color-mix(in srgb, var(--color-brand-base) 88%, #000);
  --color-brand-pressed: color-mix(in srgb, var(--color-brand-base) 78%, #000);
  --color-brand-subtle: color-mix(in srgb, var(--color-brand-base) 12%, var(--color-bg-surface));
  --color-brand-text: var(--color-brand-base);
  --color-tv-bg: var(--color-neutral-950);
  --color-tv-surface: var(--color-neutral-900);
  --color-tv-raised: var(--color-neutral-800);
  --color-tv-text-primary: var(--color-neutral-0);
  --color-tv-text-secondary: var(--color-neutral-300);
  --color-tv-price: var(--color-neutral-0);
  --color-tv-divider: var(--color-neutral-700);
  --color-tv-accent: var(--color-blue-300);
  --elevation-1: 0px 1px 2px 0px #00000066;
  --elevation-2: 0px 4px 12px 0px #00000080;
  --elevation-3: 0px 12px 32px 0px #00000099;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg-canvas: var(--color-neutral-950);
    --color-bg-surface: var(--color-neutral-900);
    --color-bg-raised: var(--color-neutral-800);
    --color-bg-sunken: var(--color-neutral-950);
    --color-border-subtle: var(--color-neutral-800);
    --color-border-default: var(--color-neutral-700);
    --color-border-strong: var(--color-neutral-500);
    --color-text-primary: var(--color-neutral-50);
    --color-text-secondary: var(--color-neutral-300);
    --color-text-tertiary: var(--color-neutral-400);
    --color-text-disabled: var(--color-neutral-600);
    --color-text-inverse: var(--color-neutral-950);
    --color-focus: var(--color-blue-300);
    --color-accent-solid: var(--color-blue-600);
    --color-accent-on-solid: var(--color-neutral-0);
    --color-accent-text: var(--color-blue-300);
    --color-accent-subtle: var(--color-blue-900);
    --color-success-solid: var(--color-green-600);
    --color-success-on-solid: var(--color-neutral-0);
    --color-success-text: var(--color-green-300);
    --color-success-subtle: var(--color-green-900);
    --color-warning-solid: var(--color-amber-300);
    --color-warning-on-solid: var(--color-neutral-950);
    --color-warning-text: var(--color-amber-300);
    --color-warning-subtle: var(--color-amber-900);
    --color-danger-solid: var(--color-red-600);
    --color-danger-on-solid: var(--color-neutral-0);
    --color-danger-text: var(--color-red-300);
    --color-danger-subtle: var(--color-red-900);
    --color-info-solid: var(--color-teal-600);
    --color-info-on-solid: var(--color-neutral-0);
    --color-info-text: var(--color-teal-300);
    --color-info-subtle: var(--color-teal-900);
    --color-status-online-fg: var(--color-success-text);
    --color-status-online-bg: var(--color-success-subtle);
    --color-status-offline-fg: var(--color-danger-text);
    --color-status-offline-bg: var(--color-danger-subtle);
    --color-status-out-of-sync-fg: var(--color-warning-text);
    --color-status-out-of-sync-bg: var(--color-warning-subtle);
    --color-status-storage-low-fg: var(--color-warning-text);
    --color-status-storage-low-bg: var(--color-warning-subtle);
    --color-status-drive-disconnected-fg: var(--color-danger-text);
    --color-status-drive-disconnected-bg: var(--color-danger-subtle);
    --color-status-bluetooth-disconnected-fg: var(--color-warning-text);
    --color-status-bluetooth-disconnected-bg: var(--color-warning-subtle);
    --color-brand-hover: color-mix(in srgb, var(--color-brand-base) 88%, #000);
    --color-brand-pressed: color-mix(in srgb, var(--color-brand-base) 78%, #000);
    --color-brand-subtle: color-mix(in srgb, var(--color-brand-base) 12%, var(--color-bg-surface));
    --color-brand-text: var(--color-brand-base);
    --color-tv-bg: var(--color-neutral-950);
    --color-tv-surface: var(--color-neutral-900);
    --color-tv-raised: var(--color-neutral-800);
    --color-tv-text-primary: var(--color-neutral-0);
    --color-tv-text-secondary: var(--color-neutral-300);
    --color-tv-price: var(--color-neutral-0);
    --color-tv-divider: var(--color-neutral-700);
    --color-tv-accent: var(--color-blue-300);
    --elevation-1: 0px 1px 2px 0px #00000066;
    --elevation-2: 0px 4px 12px 0px #00000080;
    --elevation-3: 0px 12px 32px 0px #00000099;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-duration-panel-fast: 0ms;
    --motion-duration-panel-base: 0ms;
    --motion-duration-panel-slow: 0ms;
    --motion-duration-tv-fade: 200ms;
    --motion-duration-tv-slide: 200ms;
    --motion-duration-tv-crossfade: 200ms;
    --motion-distance-tv-slide: 0px;
    --motion-distance-panel-nudge: 0px;
  }
}

[data-motion="reduced"] {
  --motion-duration-panel-fast: 0ms;
  --motion-duration-panel-base: 0ms;
  --motion-duration-panel-slow: 0ms;
  --motion-duration-tv-fade: 200ms;
  --motion-duration-tv-slide: 200ms;
  --motion-duration-tv-crossfade: 200ms;
  --motion-distance-tv-slide: 0px;
  --motion-distance-panel-nudge: 0px;
}