/* ==========================================================================
   AI Maestro — Design System  ·  Content Studio Aesthetic
   Premium dark SaaS — DM Sans UI · DM Mono code
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&family=DM+Mono:wght@300;400;500&display=swap');

:root {
  /* -- Backgrounds (layered depth) -------------------------------- */
  --color-base:           #0a0a0f;
  --color-panel:          #12121a;
  --color-surface:        #1a1a24;
  --color-bg-secondary:   #12121a;
  --color-bg-tertiary:    #22222e;
  --color-overlay:        rgba(10,10,15,0.72);

  /* -- Borders ---------------------------------------------------- */
  --color-border:         rgba(255,255,255,0.08);
  --color-border-strong:  rgba(255,255,255,0.16);
  --color-border-glow:    rgba(255,255,255,0.24);

  /* -- Text ------------------------------------------------------- */
  --color-text:             #e0e0e6;
  --color-text-bright:      #ffffff;
  --color-text-muted:       #6b6b80;
  --color-text-placeholder: #3d3d4e;

  /* -- Primary Accent (Teal) -------------------------------------- */
  --color-accent:       #00c4a7;
  --color-accent-hover: #00d4b4;
  --color-accent-muted: rgba(0,196,167,0.15);

  /* -- Agent Identity (OT-3D spec) -------------------------------- */
  --color-accent-claude:  #d4a574;
  --color-accent-gemini:  #a3e635;
  --color-accent-openai:  #74b9ff;
  --color-accent-link:    #58a6ff;

  /* -- Agent Glows ------------------------------------------------ */
  --glow-claude:  rgba(212,165,116,0.20);
  --glow-gemini:  rgba(163,230,53,0.20);
  --glow-openai:  rgba(116,185,255,0.20);
  --glow-link:    rgba(88,166,255,0.20);

  /* -- Agent ambient bg ------------------------------------------- */
  --bg-claude: rgba(212,165,116,0.05);
  --bg-gemini: rgba(163,230,53,0.05);
  --bg-openai: rgba(116,185,255,0.05);

  /* -- Phase Colors (Content Studio) ------------------------------ */
  --color-phase-sources: #3b82f6;
  --color-phase-scenes:  #8b5cf6;
  --color-phase-content: #10b981;
  --color-phase-outputs: #f59e0b;
  --color-phase-publish: #00c4a7;

  /* -- Tool Colors (Quick Tools) ---------------------------------- */
  --color-tool-image:  #ec4899;
  --color-tool-video:  #8b5cf6;
  --color-tool-audio:  #06b6d4;
  --color-tool-pdf:    #f97316;
  --color-tool-studio: #00c4a7;

  /* -- Status ----------------------------------------------------- */
  --color-success: #3fb950;
  --color-error:   #f85149;
  --color-warning: #d29922;

  /* -- Buttons ---------------------------------------------------- */
  --color-btn-success:       #1a7f37;
  --color-btn-success-hover: #238636;
  --color-btn-danger-bg:     #3d1515;
  --color-btn-danger-border: #6e2a2a;

  /* -- Typography ------------------------------------------------- */
  --font-ui:      'DM Sans', system-ui, -apple-system, sans-serif;
  --font-mono:    'DM Mono', 'SFMono-Regular', Consolas, monospace;
  --font-display: 'DM Sans', system-ui, sans-serif;

  /* -- Type Scale ------------------------------------------------- */
  --text-2xs:  10px;
  --text-xs:   11px;
  --text-sm:   13px;
  --text-base: 14px;
  --text-md:   16px;
  --text-lg:   20px;
  --text-xl:   24px;
  --text-2xl:  32px;
  --text-3xl:  40px;

  /* -- Spacing (4px base) ----------------------------------------- */
  --spacing-2xs: 2px;
  --spacing-xs:  4px;
  --spacing-sm:  8px;
  --spacing-md:  12px;
  --spacing-lg:  16px;
  --spacing-xl:  24px;
  --spacing-2xl: 32px;
  --spacing-3xl: 48px;
  --spacing-4xl: 64px;

  /* -- Border Radius ---------------------------------------------- */
  --radius-xs:   4px;
  --radius-sm:   6px;
  --border-radius: 8px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --radius-xl:   20px;
  --radius-pill: 28px;

  /* -- Layout ----------------------------------------------------- */
  --gap:               8px;
  --sidebar-skills:    212px;
  --sidebar-timeline:  192px;
  --header-height:     52px;
  --timeline-entry-size: 0.7rem;

  /* -- Transitions (spring easing) -------------------------------- */
  --ease:          cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);
  --transition-fast:   150ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-medium: 240ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-slow:   380ms cubic-bezier(0.16, 1, 0.3, 1);

  /* -- Animation Durations ---------------------------------------- */
  --duration-instant: 100ms;
  --duration-fast:    150ms;
  --duration-normal:  250ms;
  --duration-slow:    400ms;

  /* -- Elevation Shadows ------------------------------------------ */
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.5), 0 1px 2px rgba(0,0,0,0.7);
  --shadow-md:  0 4px 16px rgba(0,0,0,0.6), 0 2px 6px rgba(0,0,0,0.5);
  --shadow-lg:  0 16px 48px rgba(0,0,0,0.7), 0 4px 16px rgba(0,0,0,0.6);
  --shadow-xl:  0 32px 80px rgba(0,0,0,0.75), 0 8px 24px rgba(0,0,0,0.6);

  /* -- Glass System ----------------------------------------------- */
  --glass-bg:        rgba(18,18,26,0.88);
  --glass-border:    rgba(255,255,255,0.08);
  --glass-blur:      20px;
  --glass-sat:       180%;

  /* -- Z-Index Scale ---------------------------------------------- */
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-modal:    300;
  --z-toast:    400;
  --z-tooltip:  500;

  /* -- Skeleton Animation ----------------------------------------- */
  --skeleton-base:     #1a1a24;
  --skeleton-shine:    #22222e;
  --skeleton-duration: 1.8s;

  /* -- Backward Compatibility (dashboard legacy) ------------------ */
  --spacing-md-legacy: 16px;
  --spacing-lg-legacy: 24px;
  --spacing-xl-legacy: 32px;

  /* -- Legacy Aliases (media-panel.css, chat-panel.css) ----------- */
  --bg-secondary:  var(--color-bg-secondary);
  --bg-tertiary:   var(--color-bg-tertiary);
  --border:        var(--color-border);
  --border-color:  var(--color-border);
  --accent:        var(--color-accent-link);
}

/* -- Light Theme --------------------------------------------------- */
body.light-theme,
html.light-theme-init body {
  --color-base:           #f0f4f8;
  --color-panel:          #ffffff;
  --color-surface:        #e8edf3;
  --color-bg-secondary:   #ffffff;
  --color-bg-tertiary:    #dde4ed;
  --color-border:         rgba(0,0,0,0.10);
  --color-border-strong:  rgba(0,0,0,0.18);
  --color-text:           #1a2636;
  --color-text-bright:    #0d1a26;
  --color-text-muted:     #5a7082;
  --color-text-placeholder: #8a9ab0;
  --color-accent-link:    #1a5ec7;
  --color-error:          #cf222e;
  --color-success:        #1a7f37;
  --color-btn-success:    #1a7f37;
  --color-btn-success-hover: #218739;
  --glow-claude: rgba(180,100,40,0.10);
  --glow-gemini: rgba(80,160,30,0.10);
  --glow-openai: rgba(40,100,200,0.10);
  --glow-link:   rgba(26,94,199,0.10);
  /* Glass overrides for light mode */
  --glass-bg:        rgba(240,244,248,0.92);
  --glass-border:    rgba(0,0,0,0.08);
  --glass-sat:       120%;
  /* Shadow overrides */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.10), 0 2px 4px rgba(0,0,0,0.06);
  --shadow-lg: 0 8px 24px rgba(0,0,0,0.12), 0 4px 8px rgba(0,0,0,0.06);
  --shadow-xl: 0 20px 48px rgba(0,0,0,0.14), 0 8px 16px rgba(0,0,0,0.08);
  /* Skeleton overrides */
  --skeleton-base:  #dde4ed;
  --skeleton-shine: #e8edf3;
}

@media (prefers-color-scheme: light) {
  /* Auto light mode -- fill values when ready */
}

/* -- Light Theme: panel hardcoded-rgba overrides ------------------- */
/* media-panel.css and chat-panel.css contain hardcoded rgba(255,...)
   values that can't be overridden via CSS variables alone.           */

body.light-theme .media-panel,
html.light-theme-init body .media-panel {
  scrollbar-color: rgba(0,0,0,0.12) transparent;
}

body.light-theme .chat-messages,
body.light-theme .chat-history-list,
html.light-theme-init body .chat-messages,
html.light-theme-init body .chat-history-list {
  scrollbar-color: rgba(0,0,0,0.12) transparent;
}

/* Hover backgrounds that use rgba(255,255,255,0.07) in dark mode */
body.light-theme .media-panel-close:hover,
body.light-theme .chat-hdr-btn:hover,
html.light-theme-init body .media-panel-close:hover,
html.light-theme-init body .chat-hdr-btn:hover {
  background: rgba(0,0,0,0.06);
}

/* Code blocks inside chat bubbles */
body.light-theme .chat-bubble pre,
html.light-theme-init body .chat-bubble pre {
  background: rgba(0,0,0,0.05);
  border-color: rgba(0,0,0,0.08);
}
body.light-theme .chat-bubble code:not(pre code),
html.light-theme-init body .chat-bubble code:not(pre code) {
  background: rgba(0,0,0,0.06);
}

/* History list separators / hover rows */
body.light-theme .chat-history-item,
html.light-theme-init body .chat-history-item {
  border-bottom-color: rgba(0,0,0,0.06);
}
body.light-theme .chat-history-item:hover,
html.light-theme-init body .chat-history-item:hover {
  background: rgba(0,0,0,0.04);
}

/* Inline file chips inside bubbles */
body.light-theme .chat-chip-inline,
html.light-theme-init body .chat-chip-inline {
  background: rgba(0,0,0,0.06);
  color: var(--color-text-muted);
}

/* Bubble image borders */
body.light-theme .chat-bubble-img,
html.light-theme-init body .chat-bubble-img {
  border-color: rgba(0,0,0,0.12);
}

/* Progress bar track in media panel */
body.light-theme .media-progress-bar,
html.light-theme-init body .media-progress-bar {
  background: rgba(0,0,0,0.08);
}

/* -- Reduced Motion ----------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-fast: 0.01ms !important;
    --transition-medium: 0.01ms !important;
    --transition-slow: 0.01ms !important;
    --duration-instant: 0.01ms !important;
    --duration-fast: 0.01ms !important;
    --duration-normal: 0.01ms !important;
    --duration-slow: 0.01ms !important;
    --skeleton-duration: 0.01ms !important;
  }
}