/* ==========================================================================
   RoOne — Theme Tokens
   Source of truth for the brand palette from CLAUDE_APP_SPECS.md.
   Do not hardcode these hex values elsewhere — reference the variables.
   ========================================================================== */

:root {
  /* Surfaces */
  --ro-bg: #12151B;           /* Dark slate charcoal base */
  --ro-panel: #1F2430;        /* Slate panel */
  --ro-panel-raised: #262C3B; /* Slightly lifted panel (cards, drawers) */
  --ro-panel-sunken: #0D0F14; /* Recessed wells (timeline track lanes) */
  --ro-border: #333A4A;
  --ro-border-soft: #2A2F3D;

  /* Brand accents */
  --ro-orange: #F37A20;
  --ro-orange-soft: rgba(243, 122, 32, 0.16);
  --ro-magenta: #C43A82;
  --ro-magenta-soft: rgba(196, 58, 130, 0.16);
  --ro-cyan: #00D2FF;
  --ro-cyan-soft: rgba(0, 210, 255, 0.14);
  --ro-gradient-brand: linear-gradient(90deg, var(--ro-orange), var(--ro-magenta));

  /* Text */
  --ro-text: #F4F5F7;
  --ro-text-dim: #A8AEBC;
  --ro-text-faint: #6D7386;

  /* Semantic */
  --ro-success: #35D08A;
  --ro-warning: #F3B120;
  --ro-danger: #FF5C5C;

  /* Track colors (timeline lanes) */
  --ro-track-script: #3D4356;
  --ro-track-video: #F37A20;
  --ro-track-vo: #35D08A;
  --ro-track-music: #C43A82;

  /* Elevation */
  --ro-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --ro-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.45);
  --ro-shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.55);
  --ro-glow-orange: 0 0 24px rgba(243, 122, 32, 0.35);
  --ro-glow-cyan: 0 0 16px rgba(0, 210, 255, 0.35);

  /* Radii */
  --ro-radius-sm: 6px;
  --ro-radius-md: 10px;
  --ro-radius-lg: 16px;
  --ro-radius-pill: 999px;

  /* Layout */
  --ro-topbar-h: 60px;
  --ro-mobile-dock-h: 64px;
  --ro-mobile-generate-h: 52px;
  --ro-timeline-h: 260px;
  --ro-timeline-h-tablet: 220px;
  --ro-director-drawer-w: 320px;

  /* Motion */
  --ro-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ro-fast: 120ms;
  --ro-med: 220ms;
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  background: var(--ro-bg);
  color: var(--ro-text);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow: hidden; /* app-shell manages its own scroll regions */
}

::selection {
  background: var(--ro-orange-soft);
  color: var(--ro-text);
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--ro-border);
  border-radius: var(--ro-radius-pill);
  border: 2px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--ro-text-faint); background-clip: content-box; }

a { color: inherit; text-decoration: none; }
button { font-family: inherit; }

.ro-hidden { display: none !important; }
.ro-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.ro-gradient-text {
  background: var(--ro-gradient-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}