/* Vistralo workspace design tokens. Keep raw design values in this file. */
@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/inter-latin-wght-normal.woff2") format("woff2");
}

:root {
  color-scheme: dark;
  --font-family: Inter, "Segoe UI Variable", "Segoe UI", sans-serif;
  --font-caption: 12px;
  --font-body: 14px;
  --font-card: 16px;
  --font-section: 20px;
  --font-title: 28px;
  --line-caption: 16px;
  --line-body: 20px;
  --line-card: 22px;
  --line-section: 28px;
  --line-title: 36px;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --space-0: 0;
  --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-14: 56px;
  --space-16: 64px;
  --radius-control: 6px;
  --radius-primary: 8px;
  --radius-card: 12px;
  --radius-pill: 999px;
  --control-small: 24px;
  --control-size: 32px;
  --control-primary: 40px;
  --border-width: 1px;
  --focus-width: 2px;
  --focus-offset: 2px;
  --rail-width: 232px;
  --rail-collapsed: 56px;
  --rail-header-height: 56px;
  --row-height: 40px;
  --list-row-height: 48px;
  --avatar-size: 32px;
  --avatar-small: 20px;
  --icon-small: 14px;
  --icon-navigation: 16px;
  --icon-size: 20px;
  --brand-size: 24px;
  --toolbar-height: 48px;
  --card-min-width: 300px;
  --card-compact-min-width: 280px;
  --card-gap: 24px;
  --card-row-gap: 32px;
  --menu-width: 240px;
  --menu-item-height: 36px;
  --search-width: 260px;
  --card-title-height: 44px;
  --thumbnail-ratio: 16 / 9;
  --selection-target: 32px;
  --checkbox-size: 20px;
  --card-duration-offset: 8px;
  --status-height: 20px;
  --counter-height: 18px;
  --progress-height: 4px;
  --nav-indicator-width: 3px;
  --tab-indicator-height: 2px;
  --corner-size: 12px;
  --corner-inset: 6px;
  --corner-stroke: 2px;
  --play-size: 40px;
  --share-height: 28px;
  --list-thumbnail-width: 64px;
  --list-thumbnail-height: 36px;
  --dialog-width: 600px;
  --detail-media-height: 560px;
  --detail-sidebar-width: 280px;
  --evidence-thumb-width: 180px;
  --toast-width: 420px;
  --dialog-max-height: 90dvh;
  --motion-fast: 120ms;
  --motion-standard: 150ms;
  --motion-enter: 160ms;
  --motion-slow: 200ms;
  --motion-shimmer: 1200ms;
  --motion-ease: cubic-bezier(0.2, 0, 0, 1);
  --motion-enter-distance: 8px;
  --motion-menu-distance: 4px;
  --motion-toolbar-delay: 40ms;
  --motion-grid-delay: 80ms;
  --bg-page: #0b0d12;
  --bg-rail: #12151c;
  --bg-card: #181c25;
  --bg-elevated: #20242f;
  --fg-1: #f4f5f8;
  --fg-2: #b9bdc8;
  --fg-3: #8e93a3;
  --divider: #2e313c;
  --control-border: #4b5066;
  /* Accessible standalone control outline; reference stroke retained above. */
  --control-border-strong: #747a91;
  --card-border: rgb(255 255 255 / 8%);
  --card-border-hover: rgb(255 255 255 / 16%);
  --focus: #8b8fff;
  --accent: #4b52cf;
  --accent-hover: #5a61d8;
  --accent-pressed: #3f46b8;
  --accent-soft: #a8adfd;
  --selected-fill: rgb(168 173 253 / 14%);
  --indicator: #a8adfd;
  --success-bg: rgb(34 197 94 / 16%);
  --success-fg: #86efac;
  --danger-bg: rgb(239 68 68 / 16%);
  --danger-fg: #fca5a5;
  --card-hover-bg: color-mix(in srgb, var(--bg-card), white 4%);
  --card-pressed-bg: color-mix(in srgb, var(--bg-card), black 2%);
  --hover-bg: rgb(255 255 255 / 4%);
  --overlay: rgb(0 0 0 / 72%);
  --overlay-fg: #ffffff;
  --backdrop: rgb(0 0 0 / 64%);
  --primary-fg: #ffffff;
  --shadow: 0 8px 32px rgb(0 0 0 / 28%);
  --card-shadow: none;
  --primary-inset: inset 0 1px 0 rgb(255 255 255 / 14%);
  --fg-primary: var(--fg-1);
  --fg-secondary: var(--fg-2);
  --fg-tertiary: var(--fg-3);
  --stroke-divider: var(--divider);
  --stroke-control: var(--control-border);
  --stroke-control-strong: var(--control-border-strong);
  --stroke-card: var(--card-border);
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg-page: #f7f8fa;
  --bg-rail: #ffffff;
  --bg-card: #ffffff;
  --bg-elevated: #ffffff;
  --fg-1: #14161c;
  --fg-2: #474c59;
  --fg-3: #626876;
  --divider: #e3e5ea;
  --control-border: #8a90a0;
  --control-border-strong: #737b8c;
  --card-border: rgb(0 0 0 / 8%);
  --card-border-hover: rgb(0 0 0 / 16%);
  --accent: #4b52cf;
  --accent-hover: #3f46b8;
  --accent-pressed: #343aa4;
  --accent-soft: #4b52cf;
  --indicator: #4b52cf;
  --focus: #4b52cf;
  --selected-fill: rgb(75 82 207 / 10%);
  --success-bg: #dcfce7;
  --success-fg: #15803d;
  --danger-bg: #fee2e2;
  --danger-fg: #b91c1c;
  --card-hover-bg: color-mix(in srgb, var(--bg-card), black 4%);
  --card-pressed-bg: color-mix(in srgb, var(--bg-card), black 6%);
  --hover-bg: rgb(0 0 0 / 4%);
  --backdrop: rgb(0 0 0 / 48%);
  --shadow: 0 8px 32px rgb(20 22 28 / 14%);
  --card-shadow: 0 1px 2px rgb(20 22 28 / 4%);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-fast: 0ms;
    --motion-standard: 0ms;
    --motion-enter: 0ms;
    --motion-slow: 0ms;
    --motion-enter-distance: 0;
    --motion-menu-distance: 0;
    --motion-toolbar-delay: 0ms;
    --motion-grid-delay: 0ms;
  }
}

@media (forced-colors: active) {
  :root,
  :root[data-theme="light"] {
    --bg-page: Canvas;
    --bg-rail: Canvas;
    --bg-card: Canvas;
    --bg-elevated: Canvas;
    --fg-1: CanvasText;
    --fg-2: CanvasText;
    --fg-3: CanvasText;
    --divider: CanvasText;
    --control-border: ButtonText;
    --control-border-strong: ButtonText;
    --card-border: CanvasText;
    --card-border-hover: Highlight;
    --focus: Highlight;
    --accent: Highlight;
    --accent-hover: Highlight;
    --accent-pressed: Highlight;
    --accent-soft: LinkText;
    --indicator: Highlight;
    --selected-fill: Canvas;
    --success-bg: Canvas;
    --success-fg: CanvasText;
    --danger-bg: Canvas;
    --danger-fg: CanvasText;
    --card-hover-bg: Canvas;
    --card-pressed-bg: Canvas;
    --hover-bg: Canvas;
    --overlay: Canvas;
    --overlay-fg: CanvasText;
    --primary-fg: HighlightText;
    --shadow: none;
    --card-shadow: none;
    --primary-inset: none;
  }
}