/* Writer App CSS Variables - Professional Black-Based Theme Matching vis.css */

/* Theme-aware color tokens - matching vis.css pattern */
:root,
[data-theme="light"] {
  --writer-bg: var(--workspace-bg-tertiary, #f3f2f0);
  --writer-border: var(--workspace-border-default, #999999);
  --writer-toolbar-bg: var(--workspace-bg-secondary, #f8f7f5);
  --writer-text-primary: var(--text-primary, #1c1c1c);
  --writer-text-secondary: var(--text-secondary, #3a3a3a);
  --writer-text-muted: var(--text-muted, #777777);
  --writer-hover-bg: var(--workspace-bg-tertiary, #f3f2f0);
  --writer-active-bg: var(--workspace-bg-elevated);
  --writer-active-border: var(--workspace-border-hover);
  --writer-surface: var(--workspace-bg-secondary, #f8f7f5);

  /* Legacy compatibility */
  --writer-primary: var(--color-btn-primary-bg);
  --writer-primary-hover: var(--color-btn-primary-hover-bg);
  --writer-secondary: var(--text-secondary);
  --writer-background: var(--bg-page);
  --writer-text: var(--text-primary);
}

[data-theme="dark"] {
  /* Use global workspace colors for consistency with Code/Vis */
  --writer-bg: var(--workspace-bg-primary);
  --writer-border: var(--workspace-border-default);
  --writer-toolbar-bg: var(--workspace-bg-secondary);
  --writer-text-primary: var(--text-primary);
  --writer-text-secondary: var(--text-secondary);
  --writer-text-muted: var(--text-muted);
  --writer-hover-bg: var(--workspace-bg-tertiary);
  --writer-active-bg: rgba(
    255,
    255,
    255,
    0.1
  ); /* Neutral light overlay instead of blue */
  --writer-active-border: var(
    --workspace-border-active,
    #6a6a6a
  ); /* Neutral gray instead of blue */
  --writer-surface: var(--workspace-bg-secondary);

  /* Legacy compatibility */
  --writer-primary: var(--color-btn-primary-bg);
  --writer-primary-hover: var(--color-btn-primary-hover-bg);
  --writer-secondary: var(--text-secondary);
  --writer-background: var(--workspace-bg-primary);
  --writer-text: var(--text-primary);

  /* Editor specific - workspace colors in dark mode */
  --editor-bg: var(--workspace-bg-primary);
  --editor-text: var(--text-primary);
  --editor-line-number: var(--text-muted);
  --editor-selection: rgba(
    255,
    255,
    255,
    0.15
  ); /* Neutral selection instead of blue */
}

:root {
  /* Editor specific - light mode defaults */
  --editor-bg: #f3f2f0;
  --editor-text: #1c1c1c;
  --editor-line-number: #777777;
  --editor-selection: rgba(0, 0, 0, 0.05);

  /* Spacing */
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;

  /* Typography */
  --font-sans:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: "Monaco", "Menlo", "Ubuntu Mono", monospace;

  /* Borders */
  --border-radius: 0.375rem;
  --border-width: 1px;

  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);

  /* Component Sizes - icon sizes use shared --icon-xs..--icon-2xl from colors.css */
  --button-height: 32px;
  --button-height-sm: 28px;
  --toolbar-height: 50px;
  --statusbar-height: 24px;

  /* Transitions */
  --transition-fast: 100ms ease;
  --transition-normal: 200ms ease-in-out;
  --transition-slow: 300ms ease-in-out;

  /* Z-index Layers */
  --z-tooltip: 1000;
  --z-dropdown: 900;
  --z-modal: 800;
  --z-toolbar: 100;
}