bitvid/css/tokens.css

:root {
  /* Color tokens */
  --color-page: rgb(255 255 255);
  --color-page-alt: rgb(249 250 251);
  --color-surface: rgb(15 23 42);
  --color-surface-alt: rgb(17 24 39);
  --color-bg: var(--color-surface);
  --color-card: rgb(30 41 59);
  --color-card-private: rgb(59 29 116);
  --color-card-critical: rgb(63 11 19);
  --color-panel: rgb(31 41 55);
  --color-panel-hover: rgb(51 65 85);
  --color-border: rgb(55 65 81);
  --color-border-subtle: rgb(209 213 219);
  --color-primary: rgb(254 0 50);
  --color-secondary: rgb(255 147 165);
  --color-info: rgb(96 165 250);
  --color-info-strong: rgb(37 99 235);
  --color-info-pressed: rgb(29 78 216);
  --color-muted-strong: rgb(107 114 128);
  --color-text: rgb(248 250 252);
  --color-text-strong: rgb(15 23 42);
  --color-text-muted: var(--color-muted);
  --color-muted: rgb(148 163 184);
  --color-muted-alt: rgb(156 163 175);
  --color-subtle-text: rgb(226 232 240);
  --color-subtle: rgb(229 231 235);
  --color-critical: rgb(127 29 29);
  --color-critical-strong: rgb(153 27 27);
  --color-neutral-700: rgb(63 63 70);
  --color-neutral-600: rgb(82 82 91);
  --color-white: rgb(255 255 255);
  --color-black: rgb(0 0 0);
  --color-overlay: rgb(26 34 52);
  --color-overlay-black: rgb(0 0 0 / 0.9);
  --color-overlay-muted: rgb(15 23 42 / 0.55);
  --color-overlay-strong: rgb(15 23 42 / 0.75);
  --color-overlay-darker: rgb(15 23 42 / 0.88);
  --color-overlay-panel: rgb(31 41 55 / 0.9);
  --color-overlay-panel-soft: rgb(31 41 55 / 0.75);
  --color-overlay-panel-tint: rgb(31 41 55 / 0.5);
  --color-overlay-panel-glass: rgb(30 41 59 / 0.85);
  --color-overlay-veil: rgb(11 17 32 / 0.96);
  --color-overlay-banner: rgb(51 65 85 / 0.95);
  --color-overlay-panel-gradient-start: rgb(30 41 59 / 0.92);
  --color-overlay-panel-gradient-end: rgb(15 23 42 / 0.92);
  --color-surface-tint-subtle: rgb(148 163 184 / 0.08);
  --color-border-translucent: rgb(148 163 184 / 0.18);
  --color-border-translucent-strong: rgb(148 163 184 / 0.25);
  --color-border-translucent-bright: rgb(148 163 184 / 0.32);
  --color-border-translucent-stronger: rgb(148 163 184 / 0.35);
  --color-border-translucent-strongest: rgb(148 163 184 / 0.4);
  --color-border-translucent-glow: rgb(148 163 184 / 0.55);
  --color-border-translucent-medium: rgb(148 163 184 / 0.2);
  --color-border-neutral-soft: rgb(229 231 235 / 0.35);
  --color-border-info-soft: rgb(96 165 250 / 0.35);
  --color-border-sidebar-strong: rgb(55 65 81 / 0.9);
  --color-ring-private: rgb(168 85 247 / 0.55);
  --color-ring-private-hover: rgb(192 132 252 / 0.65);
  --color-ring-critical: rgb(239 68 68 / 0.4);
  --color-ring-critical-soft: rgb(239 68 68 / 0.35);
  --color-ring-critical-hover: rgb(239 68 68 / 0.45);
  --color-ring-critical-strong: rgb(239 68 68 / 0.55);
  --color-ring-alert: rgb(220 38 38 / 0.6);
  --color-gradient-visibility-start: rgb(129 140 248 / 0.4);
  --color-gradient-visibility-end: rgb(192 132 252 / 0.32);
  --color-white-soft: rgb(255 255 255 / 0.1);
  --color-white-softer: rgb(255 255 255 / 0.3);
  --color-white-softest: rgb(255 255 255 / 0.4);
  --color-shadow-floating: rgb(8 11 30 / 0.55);
  --color-shadow-elevated: rgb(8 11 30 / 0.45);
  --color-shadow-panel: rgb(15 23 42 / 0.35);
  --color-shadow-notification: rgb(15 23 42 / 0.3);
  --color-shadow-sidebar: rgb(0 0 0 / 0.45);
  --color-divider-strong: rgb(15 23 42 / 0.35);
  --color-text-frosted-strong: rgb(226 232 240 / 0.94);
  --color-text-frosted: rgb(226 232 240 / 0.9);
  --color-text-frosted-soft: rgb(226 232 240 / 0.82);

  /* Spacing scale */
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;

  /* Border radii */
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm: 0 0.0625rem 0.125rem 0 rgb(0 0 0 / 5%);
  --shadow-md: 0 0.25rem 0.375rem -0.0625rem rgb(0 0 0 / 10%);
  --shadow-lg: 0 0.625rem 0.9375rem -0.1875rem rgb(0 0 0 / 10%);
  --shadow-modal: 0 1.25rem 2.5rem -0.375rem rgb(15 23 42 / 55%);

  /* Typography */
  --font-family-sans: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-family-mono: "Fira Code", "SFMono-Regular", ui-monospace, monospace;
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.5rem;
  --font-size-2xl: 2rem;
  --line-height-tight: 1.1;
  --line-height-snug: 1.25;
  --line-height-base: 1.5;
  --line-height-relaxed: 1.75;

  /* Motion */
  --motion-duration-fast: 120ms;
  --motion-duration-base: 160ms;
  --motion-duration-slow: 280ms;
  --motion-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --motion-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --modal-motion-duration: var(--motion-duration-base);
}