@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;500;700&display=swap');

/* Terminal-2 Theme CSS Variables - Enhanced with Light/Dark Mode Support */
:root {
  /* System preference detection */
  color-scheme: light dark;
  
  /* Typography */
  --font-family-primary: 'Roboto Mono', ui-monospace, 'SFMono-Regular', Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
  --font-size-base: 16px;
  --font-size-large: 2rem;
  --font-size-medium: 1.1rem;
  --font-size-small: 0.9rem;
  --font-size-tiny: 0.85em;
  --font-weight-normal: normal;
  --font-weight-bold: bold;
  --line-height-base: 1.3;
  --line-height-tight: 1;
  
  /* Spacing */
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 0.5rem;
  --spacing-lg: 0.75rem;
  --spacing-xl: 1rem;
  --spacing-xxl: 1.5rem;
  
  /* Layout */
  --max-width-content: 960px;
  --max-width-form: 400px;
  --sidebar-width: 250px;
  --border-radius-sm: 2px;
  --border-radius-md: 4px;
  --border-radius-lg: 8px;
  
  /* Animation */
  --transition-fast: 0.05s;
  --transition-normal: 0.15s;
  --transition-slow: 0.3s;
  --transition-ease: cubic-bezier(0.4, 0.0, 0.2, 1);
  --transition-theme: color 0.3s var(--transition-ease), 
                      background-color 0.3s var(--transition-ease),
                      border-color 0.3s var(--transition-ease),
                      box-shadow 0.3s var(--transition-ease);
  
  /* Shadows */
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.15);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.2);
  
  /* Z-index layers */
  --z-base: 1;
  --z-dropdown: 100;
  --z-modal: 10000;
  --z-sidebar: 1000;
  --z-menu-toggle: 1001;
  
  /* Grid and flex values */
  --grid-gap-sm: 5px;
  --grid-gap-md: 10px;
  --flex-gap-sm: 0.5rem;
  --flex-gap-md: 1rem;
  
  /* Opacity values */
  --opacity-disabled: 0.6;
  --opacity-hover: 0.8;
  --opacity-focus: 0.05;
}

/* Light mode (default) - Clean, modern terminal aesthetic */
:root {
  /* Light mode colors - balanced contrast */
  --color-bg-primary: #fafafa;
  --color-bg-secondary: #f0f0f0;
  --color-bg-tertiary: #ffffff;
  --color-text-primary: #2d3748;
  --color-text-secondary: #4a5568;
  --color-text-muted: #4a5568;
  --color-text-faded: #4a5568;
  --color-text-dots: #a0aec0;
  --color-accent-primary: #38a169;
  --color-accent-hover: #2f855a;
  --color-border: #e2e8f0;
  --color-border-focus: #38a169;
  --color-error: #e53e3e;
  --color-success: #38a169;
  
  /* Light mode specific shadows */
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
  --shadow-entry: 0 1px 3px rgba(0, 0, 0, 0.05);
  --shadow-entry-hover: 0 2px 8px rgba(0, 0, 0, 0.08);
  
  /* Visual alignment for leader dots */
  --dots-offset-y: calc(100% - 1px);
}

/* Dark mode - Enhanced terminal aesthetic with better contrast */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    /* Dark mode colors - refined terminal palette */
    --color-bg-primary: #0f172a;
    --color-bg-secondary: #1e293b;
    --color-bg-tertiary: #334155;
    --color-text-primary: #cbd5e1;
    --color-text-secondary: #a0aec0;
    --color-text-muted: #64748b;
    --color-text-faded: #475569;
    --color-text-dots: #334155;
    --color-accent-primary: #67bb79;
    --color-accent-hover: #39ff64;
    --color-border: #334155;
    --color-border-focus: #67bb79;
    --color-error: #f87171;
    --color-success: #67bb79;
    
    /* Dark mode specific shadows */
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);
    --shadow-entry: 0 1px 3px rgba(0, 0, 0, 0.2);
    --shadow-entry-hover: 0 2px 8px rgba(0, 0, 0, 0.3);
  }
}

/* Manual dark mode override */
:root[data-theme="dark"] {
  /* Dark mode colors - refined terminal palette */
  --color-bg-primary: #0f172a;
  --color-bg-secondary: #1e293b;
  --color-bg-tertiary: #334155;
  --color-text-primary: #cbd5e1;
  --color-text-secondary: #a0aec0;
  --color-text-muted: #64748b;
  --color-text-faded: #475569;
  --color-text-dots: #334155;
  --color-accent-primary: #67bb79;
  --color-accent-hover: #39ff64;
  --color-border: #334155;
  --color-border-focus: #67bb79;
  --color-error: #f87171;
  --color-success: #67bb79;
  
  /* Dark mode specific shadows */
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);
  --shadow-entry: 0 1px 3px rgba(0, 0, 0, 0.2);
  --shadow-entry-hover: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* Enhanced accessibility and visual polish */
:root {
  /* Focus ring for accessibility */
  --focus-ring: 0 0 0 3px rgba(56, 161, 105, 0.2);
  --focus-ring-dark: 0 0 0 3px rgba(103, 187, 121, 0.2);
  
  /* Hover animations */
  --hover-lift: translateY(-1px);
  --hover-scale: scale(1.01);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --focus-ring: var(--focus-ring-dark);
  }
}

:root[data-theme="dark"] {
  --focus-ring: var(--focus-ring-dark);
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-fast: 0s;
    --transition-normal: 0s;
    --transition-slow: 0s;
    --transition-theme: none;
  }
}

/* High contrast mode adjustments */
@media (prefers-contrast: high) {
  :root {
    --color-text-faded: var(--color-text-muted);
    --color-text-dots: var(--color-border);
  }
}