/* Shared design tokens for the PIPs workspace. */
:root {
    color-scheme: light;
    --workspace-bg: #f3f4f6;
    --surface: #fff;
    --subtle: #f8fafc;
    --text: #253247;
    --muted: #63758b;
    --border: #e1e6ee;
    --control-border: #cdd6e2;
    --primary: #4f56b8;
    --primary-hover: #40479e;
    --selection: #eef1ff;
    --radius: 6px;
    --sidebar-width: 232px;
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Arial, sans-serif;
    font-size: 14px;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; color: var(--text); background: var(--workspace-bg); line-height: 1.5; }
a { color: var(--primary); text-underline-offset: 3px; }
button, input, select, textarea { font: inherit; }
button, input:not([type='checkbox']):not([type='radio']):not([type='range']):not([type='color']), select, textarea {
    border: 1px solid var(--control-border); border-radius: 4px; padding: 8px 10px;
    background: var(--surface); color: var(--text); min-height: 36px; max-width: 100%;
}
input, select, textarea { min-width: 0; }
input::placeholder, textarea::placeholder { color: #7b8798; opacity: 1; }
input[type='checkbox'], input[type='radio'] { accent-color: var(--primary); width: 16px; height: 16px; flex-shrink: 0; }
textarea { resize: vertical; min-height: 80px; }
button { cursor: pointer; font-weight: 600; }
button:hover { background: var(--subtle); border-color: #a9b6c8; }
button:disabled { cursor: not-allowed; opacity: .5; }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
input:focus-visible, textarea:focus-visible, select:focus-visible { outline-offset: 1px; }
h1, h2, h3, p { margin-top: 0; }
h1 { font-size: 24px; line-height: 1.3; font-weight: 600; letter-spacing: -.4px; }
h2 { font-size: 16px; font-weight: 600; }
h3 { font-size: 14px; font-weight: 600; }
svg { width: 18px; height: 18px; flex-shrink: 0; vertical-align: middle; }
.eyebrow { display: block; font-size: 10px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.visually-hidden, .sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; top: -80px; left: 16px; padding: 10px 16px; background: white; z-index: 200; }
.skip-link:focus { top: 8px; }
.primary, button.primary, .btn-primary { background: var(--primary); color: white; border: 1px solid var(--primary); }
.primary:hover, button.primary:hover, .btn-primary:hover { background: var(--primary-hover); color: white; border-color: var(--primary-hover); }
.badge { display: inline-flex; align-items: center; padding: 2px 7px; font-size: 11px; font-weight: 600; border-radius: 4px; background: #eff3f7; color: #55687c; white-space: nowrap; }
.badge--active { background: #edf6f0; color: #36704b; }
.empty-state { padding: 32px 20px; text-align: center; color: var(--muted); border: 1px dashed var(--border); border-radius: var(--radius); }
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}