/* ── rSpace Theme System ──
 * CSS custom properties for dark/light theming.
 * Dark is default on :root; light overrides on [data-theme="light"].
 * prefers-color-scheme fallback applies when no data-theme is set yet. */

:root {
  color-scheme: dark;

  /* Surface */
  --rs-bg-page:            #0f172a;
  --rs-bg-surface:         #1e293b;
  --rs-bg-surface-raised:  #334155;
  --rs-bg-surface-sunken:  #0f172a;
  --rs-bg-overlay:         rgba(15, 23, 42, 0.85);
  --rs-bg-hover:           rgba(255, 255, 255, 0.05);
  --rs-bg-active:          rgba(6, 182, 212, 0.1);

  /* Text */
  --rs-text-primary:       #e2e8f0;
  --rs-text-secondary:     #94a3b8;
  --rs-text-muted:         #64748b;
  --rs-text-inverse:       #0f172a;

  /* Borders */
  --rs-border:             rgba(255, 255, 255, 0.1);
  --rs-border-subtle:      rgba(255, 255, 255, 0.06);
  --rs-border-strong:      rgba(255, 255, 255, 0.2);

  /* Glass */
  --rs-glass-bg:           rgba(15, 23, 42, 0.85);
  --rs-glass-border:       rgba(255, 255, 255, 0.08);

  /* Shadows */
  --rs-shadow-sm:          0 1px 3px rgba(0, 0, 0, 0.3);
  --rs-shadow-md:          0 4px 20px rgba(0, 0, 0, 0.4);
  --rs-shadow-lg:          0 8px 30px rgba(0, 0, 0, 0.4);

  /* Spinner */
  --rs-spinner-track:      rgba(255, 255, 255, 0.1);
  --rs-spinner-head:       #14b8a6;

  /* Accent (same both themes) */
  --rs-accent:             #14b8a6;
  --rs-accent-hover:       #0d9488;

  /* Primary (same both themes) */
  --rs-primary:            #4f46e5;
  --rs-primary-hover:      #6366f1;

  /* Semantic (same both themes) */
  --rs-error:              #ef4444;
  --rs-success:            #22c55e;
  --rs-warning:            #fbbf24;

  /* Gradients (same both themes) */
  --rs-gradient-brand:     linear-gradient(135deg, #14b8a6, #22d3ee);
  --rs-gradient-primary:   linear-gradient(135deg, #6366f1, #4f46e5);
  --rs-gradient-cta:       linear-gradient(135deg, #14b8a6, #0d9488);

  /* Component-specific tokens */
  --rs-input-bg:           #0f172a;
  --rs-input-border:       #334155;
  --rs-input-text:         #e2e8f0;
  --rs-btn-secondary-bg:   rgba(255, 255, 255, 0.08);
  --rs-btn-secondary-text: #94a3b8;
  --rs-card-bg:            rgba(255, 255, 255, 0.03);
  --rs-card-border:        rgba(255, 255, 255, 0.06);

  /* Canvas */
  --rs-canvas-bg:          #0f172a;
  --rs-canvas-grid:        rgba(255, 255, 255, 0.04);

  /* Toolbar */
  --rs-toolbar-bg:         #1e293b;
  --rs-toolbar-btn-bg:     #334155;
  --rs-toolbar-btn-hover:  #475569;
  --rs-toolbar-btn-text:   #e2e8f0;
  --rs-toolbar-sep:        #334155;
  --rs-toolbar-panel-bg:   #1e293b;
  --rs-toolbar-panel-border: #334155;
}

[data-theme="light"] {
  color-scheme: light;

  /* Surface */
  --rs-bg-page:            #f8fafc;
  --rs-bg-surface:         #ffffff;
  --rs-bg-surface-raised:  #f1f5f9;
  --rs-bg-surface-sunken:  #f8fafc;
  --rs-bg-overlay:         rgba(255, 255, 255, 0.9);
  --rs-bg-hover:           rgba(0, 0, 0, 0.04);
  --rs-bg-active:          #e0f2fe;

  /* Text */
  --rs-text-primary:       #0f172a;
  --rs-text-secondary:     #374151;
  --rs-text-muted:         #64748b;
  --rs-text-inverse:       #e2e8f0;

  /* Borders */
  --rs-border:             rgba(0, 0, 0, 0.1);
  --rs-border-subtle:      rgba(0, 0, 0, 0.06);
  --rs-border-strong:      rgba(0, 0, 0, 0.2);

  /* Glass */
  --rs-glass-bg:           rgba(255, 255, 255, 0.9);
  --rs-glass-border:       rgba(0, 0, 0, 0.08);

  /* Shadows */
  --rs-shadow-sm:          0 1px 3px rgba(0, 0, 0, 0.05);
  --rs-shadow-md:          0 4px 20px rgba(0, 0, 0, 0.15);
  --rs-shadow-lg:          0 8px 30px rgba(0, 0, 0, 0.18);

  /* Spinner */
  --rs-spinner-track:      rgba(0, 0, 0, 0.08);
  --rs-spinner-head:       #14b8a6;

  /* Component-specific tokens */
  --rs-input-bg:           #f8fafc;
  --rs-input-border:       #e2e8f0;
  --rs-input-text:         #334155;
  --rs-btn-secondary-bg:   rgba(0, 0, 0, 0.05);
  --rs-btn-secondary-text: #374151;
  --rs-card-bg:            rgba(0, 0, 0, 0.02);
  --rs-card-border:        rgba(0, 0, 0, 0.06);

  /* Canvas */
  --rs-canvas-bg:          #ffffff;
  --rs-canvas-grid:        #f1f5f9;

  /* Toolbar */
  --rs-toolbar-bg:         #ffffff;
  --rs-toolbar-btn-bg:     #f1f5f9;
  --rs-toolbar-btn-hover:  #e2e8f0;
  --rs-toolbar-btn-text:   #0f172a;
  --rs-toolbar-sep:        #e2e8f0;
  --rs-toolbar-panel-bg:   #ffffff;
  --rs-toolbar-panel-border: #e2e8f0;
}

/* prefers-color-scheme fallback: if JS hasn't set data-theme yet */
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    color-scheme: light;

    --rs-bg-page:            #f8fafc;
    --rs-bg-surface:         #ffffff;
    --rs-bg-surface-raised:  #f1f5f9;
    --rs-bg-surface-sunken:  #f8fafc;
    --rs-bg-overlay:         rgba(255, 255, 255, 0.9);
    --rs-bg-hover:           rgba(0, 0, 0, 0.04);
    --rs-bg-active:          #e0f2fe;

    --rs-text-primary:       #0f172a;
    --rs-text-secondary:     #374151;
    --rs-text-muted:         #64748b;
    --rs-text-inverse:       #e2e8f0;

    --rs-border:             rgba(0, 0, 0, 0.1);
    --rs-border-subtle:      rgba(0, 0, 0, 0.06);
    --rs-border-strong:      rgba(0, 0, 0, 0.2);

    --rs-glass-bg:           rgba(255, 255, 255, 0.9);
    --rs-glass-border:       rgba(0, 0, 0, 0.08);

    --rs-shadow-sm:          0 1px 3px rgba(0, 0, 0, 0.05);
    --rs-shadow-md:          0 4px 20px rgba(0, 0, 0, 0.15);
    --rs-shadow-lg:          0 8px 30px rgba(0, 0, 0, 0.18);

    --rs-spinner-track:      rgba(0, 0, 0, 0.08);
    --rs-spinner-head:       #14b8a6;

    --rs-input-bg:           #f8fafc;
    --rs-input-border:       #e2e8f0;
    --rs-input-text:         #334155;
    --rs-btn-secondary-bg:   rgba(0, 0, 0, 0.05);
    --rs-btn-secondary-text: #374151;
    --rs-card-bg:            rgba(0, 0, 0, 0.02);
    --rs-card-border:        rgba(0, 0, 0, 0.06);

    --rs-canvas-bg:          #ffffff;
    --rs-canvas-grid:        #f1f5f9;

    --rs-toolbar-bg:         #ffffff;
    --rs-toolbar-btn-bg:     #f1f5f9;
    --rs-toolbar-btn-hover:  #e2e8f0;
    --rs-toolbar-btn-text:   #0f172a;
    --rs-toolbar-sep:        #e2e8f0;
    --rs-toolbar-panel-bg:   #ffffff;
    --rs-toolbar-panel-border: #e2e8f0;
  }
}