/* Shared Kiino design tokens: application and reference guide. */
:root {
  --video-chrome-fade:160ms;
  --header-height:90px;
  --kiino-tangerine: #ff913d;
  --kiino-white: #f5f0e8;
  --kiino-dark: #080808;
  --kiino-graphite: #292929;
  --kiino-gray: #6b6b6b;
  --color-bg-rgb: 8 8 8;
  --color-text-rgb: 245 240 232;
  --color-accent-rgb: 255 145 61;
  --color-bg: var(--kiino-dark);
  --color-surface: var(--kiino-graphite);
  --color-sheet: #141414;
  --color-elevated: #292929;
  --color-text: var(--kiino-white);
  --color-text-secondary: #b3b3b3;
  --color-text-on-accent: var(--kiino-dark);
  --color-accent: var(--kiino-tangerine);
  --color-accent-hover: #ffab69;
  --color-accent-pressed: #e87b2a;
  --color-border: #404040;
  --color-control-border: #858585;
  --color-success: #a6e8bf;
  --color-warning: #ffd37a;
  --color-error: #ff9e9e;
  --color-info: #adc7ff;
  --color-overlay: rgb(0 0 0 / 80%);
  --font-ui: Nagel, Arial, sans-serif;
  --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;
  --radius-small: 8px;
  --radius-card: 12px;
  --radius-dialog: 24px;
  --radius-pill: 999px;
  --mobile-nav-height: 56px;
  --control-height: 48px;
  --control-target: 44px;
  --duration-fast: 120ms;
  --duration-normal: 200ms;
  --duration-slow: 320ms;
  --ease-standard: cubic-bezier(.2, 0, 0, 1);
  --shadow-dialog: 0 24px 80px rgb(0 0 0 / 55%);
  --bg: var(--color-bg);
  --panel: var(--color-surface);
  --text: var(--color-text);
  --muted: var(--color-text-secondary);
  --lime: var(--color-accent);
  --edge: var(--color-border);
}