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

/* Base Spacing */
:root {
  /* Spacing */
  --base-spacing: 14px;
  
  /* Colors - Light Theme */
  --color-bg: #ffffff;
  --color-text: rgba(0, 0, 0, 0.85);
  --color-text-muted: rgba(0, 0, 0, 0.6);
  --color-primary: #1a1a1a;
  --color-danger: #b35555;
  --color-success: #44654a;
  --color-highlight: yellow;
  --color-green-mute: #8a9a92;
  --color-red: #b35555;
  
  /* Borders & Shadows - Light Theme */
  --color-border: rgba(0, 0, 0, 0.1);
  --color-border-hover: rgba(0, 0, 0, 0.2);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 1px 3px rgba(0, 0, 0, 0.1);
  
  /* UI Elements - Light Theme */
  --header-bg: #ececed;
  --color-box: white;
  --input-bg: white;

  --tooltip-bg: #e3e7e5;
  --tooltip-text: #525c57;

  /* Tables */
  --table-td-even-bg: #f5f5f7;
  --table-td-odd-bg: #f1f1f3;
  --table-td-hover-bg: #e5e5e6;
  --table-td-drafts-bg: #eeebe7;
  
  /* Button States - Light Theme */
  --button-bg: #fafbfc;
  --button-bg-hover: #f3f4f6;
  --button-text: var(--color-text);
  --button-border: rgba(0, 0, 0, 0.1);
  --button-border-hover: rgba(0, 0, 0, 0.15);
  --button-shadow: var(--shadow-sm);
  --button-shadow-hover: 0 2px 4px rgba(0, 0, 0, 0.08);
  
  /* Primary Button - Light Theme */
  --button-primary-bg: #1a1a1a;
  --button-primary-text: #ffffff;
  --button-primary-border: #1a1a1a;
  --button-primary-hover: #333333;
  --button-primary-shadow-hover: 0 2px 4px rgba(0, 0, 0, 0.2);
  
  /* Radii */
  --box-radius: 4px;
  --form-radius: 0px;
  --button-radius: 6px;
  
  /* Typography */
  --font-stack-sans-serif: 'Inter', -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif;
  --font-stack-serif: Iowan Old Style, Apple Garamond, Baskerville, Times New Roman, Droid Serif, Times, Source Serif Pro, serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
  --font-stack-monospace: 'Roboto Mono', monospace;

  /* SlimSelect */
  /* SlimSelect Variables - Colors */
  --ss-primary-color: var(--color-primary);
  --ss-bg-color: var(--input-bg);
  --ss-font-color: var(--color-text);
  --ss-border-color: var(--color-border);
  --ss-font-placeholder-color: var(--color-text-muted);
  --ss-disabled-color: rgba(0, 0, 0, 0.3);

  /* SlimSelect Variables - Dimensions */
  --ss-main-height: 38px;
  --ss-content-height: 300px;
  --ss-spacing-l: 0.75rem;
  --ss-spacing-m: 0.5rem;
  --ss-spacing-s: 0.25rem;

  /* SlimSelect Variables - Other */
  --ss-border-radius: var(--form-radius);
  --ss-animation-timing: 0.15s;
  --ss-font-size-main: 0.9rem;
  --ss-font-size-option: 0.9rem;

}

@media (prefers-color-scheme: dark) {
  :root {
    /* Colors - Dark Theme */
    --color-bg: #1a1a1a;
    --color-text: rgba(255, 255, 255, 0.9);
    --color-text-muted: rgba(255, 255, 255, 0.6);
    --color-primary: #ffffff;
    --color-danger: #a43b3b;
    --color-success: #44654a;
    
    /* Borders & Shadows - Dark Theme */
    --color-border: rgba(255, 255, 255, 0.1);
    --color-border-hover: rgba(255, 255, 255, 0.2);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 1px 3px rgba(0, 0, 0, 0.4);
    
    /* UI Elements - Dark Theme */
    --header-bg: rgba(0, 0, 0, 0.4);
    --color-box: #2a2a2a;
    --input-bg: #2a2a2a;

    /* Tooltips */
    --tooltip-bg: #2a2a2a;
    --tooltip-text: #8a9a92;

    /* Tables */
    --table-td-even-bg: #2a2a2a;
    --table-td-odd-bg: #2a2a2a;
    --table-td-hover-bg: #3d3d3d;
    --table-td-drafts-bg: #3a3a2a;
    --table-thead-bg: transparent;

    /* Button States - Dark Theme */
    --button-bg: #2d2d2d;
    --button-bg-hover: #3d3d3d;
    --button-text: rgba(255, 255, 255, 0.9);
    --button-border: rgba(255, 255, 255, 0.1);
    --button-border-hover: rgba(255, 255, 255, 0.2);
    --button-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    --button-shadow-hover: 0 2px 4px rgba(0, 0, 0, 0.5);
    
    /* Primary Button - Dark Theme */
    --button-primary-bg: #000000;
    --button-primary-text: #ffffff;
    --button-primary-border: #000000;
    --button-primary-hover: #1a1a1a;
    --button-primary-shadow-hover: 0 2px 8px rgba(0, 0, 0, 0.5);

    /* SlimSelect Variables - Dark Theme */
    --ss-primary-color: var(--color-primary);
    --ss-bg-color: var(--input-bg);
    --ss-font-color: var(--color-text);
    --ss-border-color: var(--color-border);
    --ss-font-placeholder-color: var(--color-text-muted);
    --ss-disabled-color: rgba(255, 255, 255, 0.3);
  }
}

/* Media Queries */
@media (max-width: 768px) {
  /* Mobile specific styles */
}

@media (min-width: 1024px) {
  /* Desktop specific styles */
}

@media (min-width: 768px) {
  /* Tablet specific styles */
}

@media (min-width: 768px) and (max-width: 1023px) {
  /* Tablet-only specific styles */
}