/* OSCine design tokens — dark cinematic default */

:root {
  /* Dark mode (default) */
  --bg-page: #0D1117;
  --bg-surface: #161B22;
  --bg-elevated: #21262D;
  --border: #30363D;
  --border-soft: #21262D;

  --primary: #4A90A4;
  --primary-hover: #2C7A7B;
  --primary-light: #1E3A3F;
  --brand: #2C7A7B; /* singular AI/brand teal */
  --secondary: #6B9BD2;
  --accent: #93C5FD;

  --text-1: #F1F5F9;
  --text-2: #CBD5E1;
  --text-3: #8B949E;

  /* semantic accents + scaffolding (theme-aware) */
  --brand-bright: #6FD2C9;        /* bright accent for icons/active text */
  --brand-wash: rgba(44,122,123,.13);  /* selected / active row fill */
  --brand-wash-bd: rgba(44,122,123,.4);
  --scaffold: #0b0f14;            /* image placeholder base */
  --scaffold-a: #11161d;          /* placeholder stripe a */
  --scaffold-b: #161d26;          /* placeholder stripe b */
  --scaffold-ink: #4a5563;        /* placeholder icon */
  --scaffold-ink2: #67727f;       /* placeholder mono caption */
  --script-bg: #0f141a;           /* screenplay page bg */
  --grey-ref: linear-gradient(160deg,#3a3f45,#2b2f34); /* neutral studio grey */
  --scrim: rgba(5,8,12,.66);      /* modal overlay */
  --strip-day-bg:#5C4A1F; --strip-day-fg:#F4D67D;
  --strip-night-bg:#1E3A5F; --strip-night-fg:#9EC1FA;
  --strip-dusk-bg:#4A3A5C; --strip-dusk-fg:#C8B0F0;
  /* industry stripboard: day/night × int/ext — cinematic dark, tuned to the teal/slate palette */
  --strip-dayint-bg:#3A372C;   --strip-dayint-fg:#ECE5D2;   --strip-dayint-edge:#56503D;
  --strip-dayext-bg:#463A18;   --strip-dayext-fg:#E7C56A;   --strip-dayext-edge:#6A5520;
  --strip-nightint-bg:#1E3A5F; --strip-nightint-fg:#9EC1FA; --strip-nightint-edge:#2F5283;
  --strip-nightext-bg:#1D3D31; --strip-nightext-fg:#7FD6A6; --strip-nightext-edge:#2C5A46;
  --banner-bg: linear-gradient(90deg,#0b0f14,#11161d);
  --day-band: #2E3A47;

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.35), 0 1px 3px rgba(0,0,0,0.25);
  --shadow:    0 4px 6px -1px rgba(0,0,0,0.4), 0 2px 4px -1px rgba(0,0,0,0.25);
  --shadow-md: 0 10px 15px -3px rgba(0,0,0,0.45), 0 4px 6px -2px rgba(0,0,0,0.3);
  --shadow-lg: 0 20px 25px -5px rgba(0,0,0,0.5), 0 10px 10px -5px rgba(0,0,0,0.3);
  --shadow-hover: 0 12px 24px -4px rgba(0,0,0,0.5), 0 8px 16px -4px rgba(0,0,0,0.35);

  /* radii */
  --r-sm: 8px;
  --r: 12px;
  --r-lg: 16px;
  --r-xl: 20px;

  /* element palette — dark fills */
  --el-cast:     #1E3A5F;
  --el-props:    #1B4D3E;
  --el-vehicle:  #5C4A1F;
  --el-stunt:    #5C2E2B;
  --el-loc:      #5C3D1F;
  --el-vfx:      #4A3A5C;
  --el-wardrobe: #1B4A47;
  --el-makeup:   #5C2E3A;
  --el-set:      #3A3A3A;
  --el-sound:    #1B3A3A;
  --el-animal:   #5C3D2E;

  /* element palette — text accent */
  --el-cast-fg:     #9EC1FA;
  --el-props-fg:    #8FD2A6;
  --el-vehicle-fg:  #F4D67D;
  --el-stunt-fg:    #F0A8A4;
  --el-loc-fg:      #F5B97A;
  --el-vfx-fg:      #C8B0F0;
  --el-wardrobe-fg: #8AD2C9;
  --el-makeup-fg:   #F0A8BD;
  --el-set-fg:      #B8B8B8;
  --el-sound-fg:    #8AC9C9;
  --el-animal-fg:   #F0B58A;

  --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Google Sans', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'Courier Prime', 'Courier New', monospace;

  --t-standard: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --t-fast: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --t-btn: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  --amber-fg: #FBBF24;
}
body[data-theme="light"] { --amber-fg: #B07A12; }

/* base artboard styles */
.osc-screen {
  font-family: var(--font);
  background: var(--bg-page);
  color: var(--text-1);
  -webkit-font-smoothing: antialiased;
  line-height: 1.6;
  font-size: 14px;
  font-weight: 500;
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  letter-spacing: -0.01em;
}

.osc-screen * {
  box-sizing: border-box;
}

.osc-screen ::-webkit-scrollbar { width: 6px; height: 6px; }
.osc-screen ::-webkit-scrollbar-track { background: transparent; }
.osc-screen ::-webkit-scrollbar-thumb { background: var(--border-soft); border-radius: 3px; }
.osc-screen ::-webkit-scrollbar-thumb:hover { background: var(--border); }

/* Buttons */
.osc-btn {
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  padding: 10px 18px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  color: var(--text-1);
  cursor: pointer;
  transition: var(--t-btn);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.osc-btn:hover {
  border-color: var(--brand);
  color: var(--text-1);
  transform: translateY(-1px);
}
.osc-btn-primary {
  background: linear-gradient(135deg, #2C7A7B 0%, #1F5F60 100%);
  color: #fff;
  border: none;
  padding: 10px 22px;
}
.osc-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border: none;
}
.osc-btn-ghost {
  background: transparent;
  border: none;
  color: var(--text-2);
}
.osc-btn-ghost:hover { color: var(--text-1); background: var(--bg-elevated); }
.osc-btn-icon {
  width: 32px; height: 32px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
}

/* Chips */
.osc-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.4;
  white-space: nowrap;
}
.osc-chip-cast     { background: var(--el-cast);     color: var(--el-cast-fg); }
.osc-chip-props    { background: var(--el-props);    color: var(--el-props-fg); }
.osc-chip-vehicle  { background: var(--el-vehicle);  color: var(--el-vehicle-fg); }
.osc-chip-stunt    { background: var(--el-stunt);    color: var(--el-stunt-fg); }
.osc-chip-loc      { background: var(--el-loc);      color: var(--el-loc-fg); }
.osc-chip-vfx      { background: var(--el-vfx);      color: var(--el-vfx-fg); }
.osc-chip-wardrobe { background: var(--el-wardrobe); color: var(--el-wardrobe-fg); }
.osc-chip-makeup   { background: var(--el-makeup);   color: var(--el-makeup-fg); }
.osc-chip-set      { background: var(--el-set);      color: var(--el-set-fg); }
.osc-chip-sound    { background: var(--el-sound);    color: var(--el-sound-fg); }
.osc-chip-animal   { background: var(--el-animal);   color: var(--el-animal-fg); }
.osc-chip-teal     { background: rgba(44,122,123,.18); color: #6FD2C9; border: 1px solid rgba(44,122,123,.45); }
.osc-chip-amber    { background: rgba(245,158,11,.18); color: #FBBF24; }
.osc-chip-red      { background: rgba(239,68,68,.18); color: #FCA5A5; }

/* Cards */
.osc-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--r);
  padding: 18px;
}

.osc-card-elev {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--r);
}

/* Uppercase tiny label */
.osc-eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
}

/* Pulse for AI */
@keyframes osc-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(44,122,123,.6); }
  50%      { box-shadow: 0 0 0 8px rgba(44,122,123,0); }
}
.osc-pulse { animation: osc-pulse 1.6s ease-in-out infinite; }

@keyframes osc-fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.osc-fade { animation: osc-fade .3s ease both; }

/* Ken-Burns slow drift for simulated animatics / playback */
@keyframes osc-kb {
  0%   { transform: scale(1.08) translate(2%, 1%); }
  100% { transform: scale(1.18) translate(-2%, -2%); }
}
.osc-kb { animation: osc-kb 9s ease-in-out infinite alternate; transform-origin: center; }

@keyframes osc-kb-2 {
  0%   { transform: scale(1.12) translate(-2%, 2%); }
  100% { transform: scale(1.05) translate(2%, -1%); }
}
.osc-kb-2 { animation: osc-kb-2 7s ease-in-out infinite alternate; transform-origin: center; }

/* Crossfade for the active animatic frame */
@keyframes osc-xfade { 0%, 8% { opacity: 0; } 16%, 100% { opacity: 1; } }

/* Tooltip-ish helpers */
.osc-row-alt > *:nth-child(even) { background: rgba(255,255,255,0.02); }

/* Floating AI button */
.osc-ai-btn {
  position: absolute;
  bottom: 22px; right: 22px;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, #2C7A7B 0%, #1F5F60 100%);
  color: #fff;
  border: none;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-lg);
  cursor: pointer;
  z-index: 50;
  transition: var(--t-btn);
}
.osc-ai-btn:hover { transform: translateY(-4px) scale(1.05); }

/* phase strip */
.osc-phase {
  display: flex;
  align-items: center;
  gap: 0;
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border-soft);
  padding: 0 24px;
  height: 40px;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
}
.osc-phase-item { color: var(--text-3); padding: 0 18px; position: relative; height: 100%; display: flex; align-items: center; }
.osc-phase-item.active { color: var(--brand); }
.osc-phase-item.active::after {
  content: '';
  position: absolute;
  left: 18px; right: 18px; bottom: -1px;
  height: 2px;
  background: var(--brand);
}
.osc-phase-sep { color: var(--text-3); opacity: 0.4; }

/* Status dot */
.osc-dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; }
.osc-dot-on { background: #4ade80; }
.osc-dot-off { background: var(--text-3); }
.osc-dot-warn { background: #fbbf24; }
.osc-dot-err { background: #ef4444; }

/* Generic input */
.osc-input {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 8px 12px;
  font: inherit;
  font-size: 13px;
  color: var(--text-1);
  outline: none;
  transition: var(--t-fast);
}
.osc-input:focus { border-color: var(--brand); }
.osc-input::placeholder { color: var(--text-3); }

/* native control text stays readable in dark mode */
.osc-screen input, .osc-screen textarea, .osc-screen select { color: var(--text-1); }
.osc-screen input[type="date"], .osc-screen input[type="number"] {
  background: var(--bg-elevated); border: 1px solid var(--border);
  border-radius: var(--r-sm); padding: 7px 10px; font: inherit; font-size: 13px; color: var(--text-1); outline: none;
}
.osc-screen input[type="date"]:focus, .osc-screen input[type="number"]:focus { border-color: var(--brand); }
body[data-theme="dark"] .osc-screen input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(.8); }
.osc-screen select option { color: #111; }

/* ───────────────────── LIGHT THEME ───────────────────── */
body[data-theme="light"] {
  --bg-page: #F3F5F8;
  --bg-surface: #FFFFFF;
  --bg-elevated: #F4F6F9;
  --border: #D3DBE4;
  --border-soft: #E6EAF0;

  --primary: #2C7A7B;
  --primary-hover: #1F5F60;
  --primary-light: #E0F2F3;
  --brand: #2C7A7B;
  --secondary: #4A90A4;
  --accent: #6B9BD2;

  --text-1: #1A202C;
  --text-2: #475569;
  --text-3: #94A3B8;

  --brand-bright: #1F5F60;
  --brand-wash: #E0F2F3;
  --brand-wash-bd: #B6DCDD;
  --scaffold: #EEF1F4;
  --scaffold-a: #E8ECEF;
  --scaffold-b: #F3F6F8;
  --scaffold-ink: #94A3B8;
  --scaffold-ink2: #64748B;
  --script-bg: #F1F3F5;
  --scrim: rgba(20,28,38,.42);
  --banner-bg: linear-gradient(90deg,#EEF2F6,#F6F9FB);
  --day-band: #3A4654;

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.03), 0 1px 3px rgba(0,0,0,0.02);
  --shadow:    0 4px 6px -1px rgba(0,0,0,0.05), 0 2px 4px -1px rgba(0,0,0,0.03);
  --shadow-md: 0 10px 15px -3px rgba(0,0,0,0.08), 0 4px 6px -2px rgba(0,0,0,0.04);
  --shadow-lg: 0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04);
  --shadow-hover: 0 12px 24px -4px rgba(0,0,0,0.12), 0 8px 16px -4px rgba(0,0,0,0.08);

  /* element chips — light pastel fills, dark ink (per highlight palette) */
  --el-cast: #D2E3FC;     --el-cast-fg: #1E3A5F;
  --el-props: #C8E6C9;    --el-props-fg: #1B4D3E;
  --el-vehicle: #FEF0C3;  --el-vehicle-fg: #5C4A1F;
  --el-stunt: #F9DEDC;    --el-stunt-fg: #5C2E2B;
  --el-loc: #FFDDBE;      --el-loc-fg: #5C3D1F;
  --el-vfx: #EADDFF;      --el-vfx-fg: #4A3A5C;
  --el-wardrobe: #C4E9E4; --el-wardrobe-fg: #1B4A47;
  --el-makeup: #FCE4EC;   --el-makeup-fg: #5C2E3A;
  --el-set: #E8EAED;      --el-set-fg: #3A3A3A;
  --el-sound: #DDE8E8;    --el-sound-fg: #1B3A3A;
  --el-animal: #FFF4E6;   --el-animal-fg: #5C3D2E;

  /* stripboard — traditional light strips */
  --strip-day-bg:#FEF9EC; --strip-day-fg:#8A6D1F;
  --strip-night-bg:#E4ECF8; --strip-night-fg:#2E4F7A;
  --strip-dusk-bg:#EFE7F6; --strip-dusk-fg:#5A4577;
  --strip-dayint-bg:#F4F2EC;   --strip-dayint-fg:#4A4A42;   --strip-dayint-edge:#D7D3C6;
  --strip-dayext-bg:#FBEEC2;   --strip-dayext-fg:#7A5E18;   --strip-dayext-edge:#E6CF88;
  --strip-nightint-bg:#DCE8F8; --strip-nightint-fg:#2E4F7A; --strip-nightint-edge:#B6CCEC;
  --strip-nightext-bg:#D7EDD9; --strip-nightext-fg:#2C6140; --strip-nightext-edge:#ADD5B5;
}
body[data-theme="light"] .osc-chip-teal  { background: #E0F2F3; color: #1F5F60; border: 1px solid #B6DCDD; }
body[data-theme="light"] .osc-chip-amber { background: #FEF0C3; color: #8A6D1F; }
body[data-theme="light"] .osc-chip-red   { background: #F9DEDC; color: #B4524C; }
body[data-theme="light"] .osc-screen select option { color: #1A202C; }
body[data-theme="light"] .osc-dot-on { background: #16a34a; }
/* light-mode depth — flat white reads as amateurish without it */
body[data-theme="light"] .osc-card { box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 1px 3px rgba(16,24,40,.05); }
body[data-theme="light"] .osc-card-elev { box-shadow: 0 1px 2px rgba(16,24,40,.05); }
body[data-theme="light"] .osc-phase { box-shadow: 0 1px 0 rgba(16,24,40,.03); }
body[data-theme="light"] .osc-input { background: #FFFFFF; }
body[data-theme="light"] .osc-btn:not(.osc-btn-primary):not(.osc-btn-ghost) { background: #FFFFFF; box-shadow: 0 1px 1.5px rgba(16,24,40,.05); }
body[data-theme="light"] .osc-screen input[type="date"], body[data-theme="light"] .osc-screen input[type="number"] { background: #FFFFFF; }