/* ProClipper theme — the ONLY application palette source. See docs/ui-theme.md. */
:root {
  color-scheme: light;
  --ui-primary: #18181b;
  --ui-primary-hover: #000000;
  --ui-on-primary: #ffffff;
  --ui-page: #f4f4f5;
  --ui-surface: #ffffff;
  --ui-surface-soft: #f4f4f5;
  --ui-text: #18181b;
  --ui-muted: #52525b;
  --ui-border: #d4d4d8;
  --ui-border-strong: #a1a1aa;
  --ui-success: #216943;
  --ui-success-bg: #edf6ee;
  --ui-warning: #805400;
  --ui-warning-bg: #fff5df;
  --ui-danger: #ad293c;
  --ui-danger-bg: #fff0f1;
  --ui-info: #285f95;
  --ui-info-bg: #edf3f9;
  --ui-selected: color-mix(in srgb, var(--ui-primary) 8%, var(--ui-surface));
  --ui-ambient: color-mix(in srgb, var(--ui-primary) 6%, transparent);
  --ui-glass: color-mix(in srgb, var(--ui-surface) 92%, transparent);
  --ui-shadow: color-mix(in srgb, var(--ui-text) 10%, transparent);
  --ui-overlay: color-mix(in srgb, var(--ui-text) 48%, transparent);
  /* Liquid layer: brand-independent light, glass and gloss. Tune these with a rebrand; see docs/ui-theme.md. */
  --ui-ambient-1: #c9d3e3;   /* cool silver light, top left */
  --ui-ambient-2: #e0d5ee;   /* soft lilac light, top right */
  --ui-ambient-3: #d2e5de;   /* faint mint light, bottom */
  --ui-glass-liquid: color-mix(in srgb, var(--ui-surface) 86%, transparent); /* cards only; >=80% so solid white buttons still read */
  --ui-glass-edge: color-mix(in srgb, var(--ui-surface) 78%, transparent);
  --ui-glass-highlight: color-mix(in srgb, #ffffff 90%, transparent);
  --ui-glass-blur: 20px;
  --ui-shadow-soft: color-mix(in srgb, var(--ui-text) 7%, transparent);
  /* Controls are solid, never glass. Edge >=3:1 on #fff and on --ui-page; disabled text >=4.5:1 on --ui-disabled-bg. */
  --ui-control-edge: #85858e;
  --ui-primary-active: color-mix(in srgb, var(--ui-primary-hover) 88%, #000000);
  --ui-secondary-active: color-mix(in srgb, var(--ui-surface-soft) 55%, var(--ui-border));
  --ui-disabled-bg: var(--ui-surface-soft);
  --ui-disabled-text: #63636b;
  --ui-radius: 22px;
  --ui-control-radius: 12px;
  --ui-space: 8px;
  --ui-header-height: 69px;
  /* Compatibility names: existing behavior and native components stay intact. */
  --bg: var(--ui-page); --panel: var(--ui-glass); --panel-2: var(--ui-surface-soft);
  --text: var(--ui-text); --ink: var(--ui-text); --muted: var(--ui-muted); --line: var(--ui-border);
  --accent: var(--ui-primary); --accent-2: var(--ui-primary-hover); --accent-dark: var(--ui-primary-hover);
  --orange: var(--ui-primary); --green: var(--ui-success); --soft: var(--ui-selected); --blue: var(--ui-surface-soft);
  --selected: var(--ui-selected); --hover: var(--ui-selected); --disabled: var(--ui-surface-soft);
  --focus: var(--ui-primary); --shadow: var(--ui-shadow); --radius: var(--ui-radius);
  --ok: var(--ui-success); --success: var(--ui-success); --success-bg: var(--ui-success-bg);
  --warn: var(--ui-warning); --warning: var(--ui-warning); --warning-bg: var(--ui-warning-bg);
  --err: var(--ui-danger); --error: var(--ui-danger); --error-bg: var(--ui-danger-bg);
  --info: var(--ui-info); --info-bg: var(--ui-info-bg);
  --shell-header-height: var(--ui-header-height);
}
/* Shared interactive foundation. Caption/video preview colors are intentionally not themed. */
:where(button, a, input, select, textarea, summary) { touch-action: manipulation; }
:where(button, a, input, select, textarea, summary):focus-visible { outline: 3px solid var(--ui-primary); outline-offset: 3px; }
:where(input[type=checkbox], input[type=radio], progress) { accent-color: var(--ui-primary); }
:where(.button, .btn) { min-height: 44px; }
:where(.button.primary, .btn:not(.ghost), .brand-mark, .brand-icon) { color: var(--ui-on-primary); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: 0s !important; animation-iteration-count: 1 !important; transition-duration: 0s !important; }
}