/* ========================================
   ROOVIX BASE SYSTEM - VARIABLES & CORE
   Knowledge Base Platform
   ======================================== */

/* ========================================
   1. CORE SPACING SYSTEM (8px grid)
   ======================================== */

:root {
  /* Spacing Scale */
  --space-1: 0.25rem;    /* 4px */
  --space-2: 0.5rem;     /* 8px */
  --space-3: 0.75rem;    /* 12px */
  --space-4: 1rem;       /* 16px */
  --space-5: 1.25rem;    /* 20px */
  --space-6: 1.5rem;     /* 24px */
  --space-8: 2rem;       /* 32px */
  --space-10: 2.5rem;    /* 40px */
  --space-12: 3rem;      /* 48px */
  --space-16: 4rem;      /* 64px */
  --space-20: 5rem;      /* 80px */
  --space-24: 6rem;      /* 96px */
  
  /* Container Max Widths */
  --container-sm: 544px;
  --container-md: 768px;
  --container-lg: 1012px;
  --container-xl: 1280px;
  --container-2xl: 1400px;
  
  /* Gaps */
  --gap-xs: var(--space-2);
  --gap-sm: var(--space-4);
  --gap-md: var(--space-6);
  --gap-lg: var(--space-8);
  --gap-xl: var(--space-12);
}

/* ========================================
   2. TYPOGRAPHY SYSTEM
   ======================================== */

:root {
  /* Font Sizes */
  --text-xs: 0.75rem;     /* 12px */
  --text-sm: 0.875rem;    /* 14px */
  --text-base: 1rem;      /* 16px */
  --text-md: 1.125rem;    /* 18px */
  --text-lg: 1.25rem;     /* 20px */
  --text-xl: 1.5rem;      /* 24px */
  --text-2xl: 2rem;       /* 32px */
  --text-3xl: 2.5rem;     /* 40px */
  --text-4xl: 3rem;       /* 48px */
  
  /* Line Heights */
  --leading-none: 1;
  --leading-tight: 1.25;
  --leading-snug: 1.375;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;
  --leading-loose: 2;
  
  /* Font Weights */
  --font-light: 300;
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
  
  /* Font Families */
  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif;
  --font-mono: 'SF Mono', Monaco, 'Cascadia Code', 'Consolas', 'Courier New', monospace;
}

/* ========================================
   3. BORDER RADIUS SYSTEM
   ======================================== */

:root {
  --radius-none: 0;
  --radius-sm: 0.1875rem;   /* 3px */
  --radius-base: 0.375rem;  /* 6px */
  --radius-md: 0.5rem;      /* 8px */
  --radius-lg: 0.75rem;     /* 12px */
  --radius-xl: 1rem;        /* 16px */
  --radius-full: 9999px;
  --radius-round: 50%;
}

/* ========================================
   4. COMPONENT DIMENSIONS
   ======================================== */

:root {
  /* Component Heights */
  --size-xs: 1.5rem;        /* 24px */
  --size-sm: 2rem;          /* 32px */
  --size-base: 2.5rem;      /* 40px */
  --size-md: 3rem;          /* 48px */
  --size-lg: 3.5rem;        /* 56px */
  --size-xl: 4rem;          /* 64px */
  
  /* Input Heights */
  --input-height-sm: 2rem;
  --input-height-base: 2.5rem;
  --input-height-lg: 3rem;
  
  /* Avatar Sizes */
  --avatar-xs: 1.5rem;
  --avatar-sm: 2rem;
  --avatar-base: 2.5rem;
  --avatar-md: 3rem;
  --avatar-lg: 4rem;
  --avatar-xl: 6rem;
  --avatar-2xl: 8rem;
  
  /* Icon Sizes */
  --icon-xs: 0.75rem;
  --icon-sm: 1rem;
  --icon-base: 1.25rem;
  --icon-md: 1.5rem;
  --icon-lg: 2rem;
  --icon-xl: 2.5rem;
  
  /* Header Heights */
  --header-height-sm: 3rem;
  --header-height-base: 4rem;
  --header-height-lg: 5rem;
  
  /* Sidebar Widths */
  --sidebar-width-sm: 16rem;
  --sidebar-width-base: 18rem;
  --sidebar-width-lg: 20rem;
  --sidebar-width-xl: 24rem;
}

/* ========================================
   5. Z-INDEX STACKING
   ======================================== */

:root {
  --z-negative: -1;
  --z-elevate: 1;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-fixed: 300;
  --z-modal-backdrop: 400;
  --z-modal: 500;
  --z-popover: 600;
  --z-tooltip: 700;
  --z-toast: 800;
  --z-header: 900;
}

/* ========================================
   6. TRANSITIONS
   ======================================== */

:root {
  --transition-fast: 0.1s ease;
  --transition-base: 0.2s ease;
  --transition-slow: 0.3s ease;
  
  --ease-linear: linear;
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ========================================
   7. COLOR VARIABLES (Light Mode)
   ======================================== */

:root {
  /* Backgrounds */
  --roovix-bg-primary: #ffffff;
  --roovix-bg-secondary: #f6f8fa;
  --roovix-bg-tertiary: #eff2f5;
  --roovix-bg-inset: #f6f8fa;
  --roovix-bg-muted: #f6f8fa;
  --roovix-bg-emphasis: #25292e;
  
  /* Surfaces */
  --roovix-surface-card: #ffffff;
  --roovix-surface-dropdown: #ffffff;
  --roovix-surface-modal: #ffffff;
  --roovix-surface-tooltip: #25292e;
  --roovix-surface-sidebar: #ffffff;
  --roovix-surface-header: #25292e;
  --roovix-surface-header-search: #25292e;
  
  /* Text */
  --roovix-text-primary: #1f2328;
  --roovix-text-secondary: #59636e;
  --roovix-text-tertiary: #818b98;
  --roovix-text-disabled: #818b98;
  --roovix-text-inverse: #ffffff;
  --roovix-text-on-emphasis: #ffffff;
  --roovix-text-white: #ffffff;
  --roovix-text-black: #1f2328;
  --roovix-text-link: #0969da;
  --roovix-text-accent: #0969da;
  
  /* Status Text */
  --roovix-text-success: #1a7f37;
  --roovix-text-danger: #d1242f;
  --roovix-text-warning: #9a6700;
  --roovix-text-info: #0969da;
  --roovix-text-done: #8250df;
  
  /* Borders */
  --roovix-border-default: #d1d9e0;
  --roovix-border-muted: #d1d9e0b3;
  --roovix-border-emphasis: #818b98;
  --roovix-border-disabled: #818b981a;
  --roovix-border-accent: #0969da;
  --roovix-border-success: #1a7f37;
  --roovix-border-danger: #cf222e;
  --roovix-border-warning: #9a6700;
  --roovix-border-info: #0969da;
  --roovix-border-done: #8250df;
  
  /* Buttons */
  --roovix-btn-primary-bg: #1f883d;
  --roovix-btn-primary-bg-hover: #1c8139;
  --roovix-btn-primary-bg-active: #197935;
  --roovix-btn-primary-bg-disabled: #95d8a6;
  --roovix-btn-primary-text: #ffffff;
  --roovix-btn-primary-text-disabled: #ffffffcc;
  --roovix-btn-primary-border: rgba(255,255,255,0.1);
  
  --roovix-btn-default-bg: #f6f8fa;
  --roovix-btn-default-bg-hover: #eff2f5;
  --roovix-btn-default-bg-active: #e6eaef;
  --roovix-btn-default-bg-disabled: #eff2f5;
  --roovix-btn-default-text: #1f2328;
  --roovix-btn-default-border: #d1d9e0;
  
  --roovix-btn-danger-bg: #f6f8fa;
  --roovix-btn-danger-bg-hover: #cf222e;
  --roovix-btn-danger-bg-active: #a40e26;
  --roovix-btn-danger-text: #d1242f;
  --roovix-btn-danger-text-hover: #ffffff;
  
  --roovix-btn-outline-bg: #f6f8fa;
  --roovix-btn-outline-bg-hover: #0969da;
  --roovix-btn-outline-text: #0969da;
  --roovix-btn-outline-text-hover: #ffffff;
  
  --roovix-btn-invisible-bg-hover: #818b981a;
  --roovix-btn-invisible-bg-active: #818b9826;
  
  --roovix-btn-star-color: #eac54f;
  
  /* Forms */
  --roovix-input-bg: #f6f8fa;
  --roovix-input-bg-hover: #eff2f5;
  --roovix-input-bg-active: #e6eaef;
  --roovix-input-bg-disabled: #eff2f5;
  --roovix-input-border: #d1d9e0;
  --roovix-input-border-focus: #0969da;
  --roovix-input-border-error: #cf222e;
  --roovix-input-border-success: #1a7f37;
  --roovix-input-text: #1f2328;
  --roovix-input-placeholder: #59636e;
  
  --roovix-input-checked-bg: #0969da;
  --roovix-input-checked-bg-hover: #0860ca;
  --roovix-input-checked-bg-active: #0757ba;
  --roovix-input-checked-border: #0969da;
  --roovix-input-knob-bg: #ffffff;
  
  /* Status Backgrounds */
  --roovix-status-success-bg: #1f883d;
  --roovix-status-success-bg-muted: #dafbe1;
  --roovix-status-success-border: #1a7f37;
  
  --roovix-status-danger-bg: #cf222e;
  --roovix-status-danger-bg-muted: #ffebe9;
  --roovix-status-danger-border: #cf222e;
  
  --roovix-status-warning-bg: #9a6700;
  --roovix-status-warning-bg-muted: #fff8c5;
  --roovix-status-warning-border: #9a6700;
  
  --roovix-status-info-bg: #0969da;
  --roovix-status-info-bg-muted: #ddf4ff;
  --roovix-status-info-border: #0969da;
  
  --roovix-status-done-bg: #8250df;
  --roovix-status-done-bg-muted: #fbefff;
  --roovix-status-done-border: #8250df;
  
  /* Code */
  --roovix-code-bg: #ffffff;
  --roovix-code-text: #1f2328;
  --roovix-code-comment: #59636e;
  --roovix-code-keyword: #cf222e;
  --roovix-code-string: #0a3069;
  --roovix-code-constant: #0550ae;
  --roovix-code-variable: #953800;
  --roovix-code-function: #6639ba;
  --roovix-code-tag: #0550ae;
  
  /* Shadows */
  --roovix-shadow-xs: 0px 1px 1px 0px #1f23280f;
  --roovix-shadow-sm: 0px 1px 1px 0px #1f23280f, 0px 1px 3px 0px #1f23280f;
  --roovix-shadow-md: 0px 1px 1px 0px #25292e1a, 0px 3px 6px 0px #25292e1f;
  --roovix-shadow-lg: 0px 6px 12px -3px #25292e0a, 0px 6px 18px 0px #25292e1f;
  --roovix-shadow-floating-sm: 0px 0px 0px 1px #d1d9e080, 0px 6px 12px -3px #25292e0a, 0px 6px 18px 0px #25292e1f;
  --roovix-shadow-floating-md: 0px 0px 0px 1px #d1d9e0, 0px 8px 16px -4px #25292e14, 0px 4px 32px -4px #25292e14;
  --roovix-shadow-inset: inset 0px 1px 0px 0px #1f23280a;
  
  /* Avatars */
  --roovix-avatar-bg: #ffffff;
  --roovix-avatar-border: #1f232826;
  --roovix-avatar-stack-fade: #c8d1da;
  
  /* Misc */
  --roovix-skeleton-bg: #818b981a;
  --roovix-progress-track: #d1d9e0;
  --roovix-progress-fill: #0969da;
  --roovix-selection-bg: #0969da33;
  --roovix-focus-outline: #0969da;
  --roovix-overlay-backdrop: #c8d1da66;
}

/* ========================================
   8. DARK MODE COLOR VARIABLES
   ======================================== */

[data-theme="dark"] {
  /* Backgrounds */
  --roovix-bg-primary: #0d1117;
  --roovix-bg-secondary: #151b23;
  --roovix-bg-tertiary: #212830;
  --roovix-bg-inset: #010409;
  --roovix-bg-muted: #151b23;
  --roovix-bg-emphasis: #3d444d;
  
  /* Surfaces */
  --roovix-surface-card: #151b23;
  --roovix-surface-dropdown: #010409;
  --roovix-surface-modal: #010409;
  --roovix-surface-tooltip: #3d444d;
  --roovix-surface-sidebar: #161b22;
  --roovix-surface-header: #151b23f2;
  --roovix-surface-header-search: #0d1117;
  
  /* Text */
  --roovix-text-primary: #f0f6fc;
  --roovix-text-secondary: #9198a1;
  --roovix-text-tertiary: #656c76;
  --roovix-text-disabled: #656c76;
  --roovix-text-inverse: #010409;
  --roovix-text-on-emphasis: #ffffff;
  --roovix-text-white: #ffffff;
  --roovix-text-black: #010409;
  --roovix-text-link: #4493f8;
  --roovix-text-accent: #4493f8;
  
  /* Status Text */
  --roovix-text-success: #3fb950;
  --roovix-text-danger: #f85149;
  --roovix-text-warning: #d29922;
  --roovix-text-info: #4493f8;
  --roovix-text-done: #ab7df8;
  
  /* Borders */
  --roovix-border-default: #3d444d;
  --roovix-border-muted: #3d444db3;
  --roovix-border-emphasis: #656c76;
  --roovix-border-disabled: #656c761a;
  --roovix-border-accent: #1f6feb;
  --roovix-border-success: #238636;
  --roovix-border-danger: #da3633;
  --roovix-border-warning: #9e6a03;
  --roovix-border-info: #1f6feb;
  --roovix-border-done: #8957e5;
  
  /* Buttons */
  --roovix-btn-primary-bg: #238636;
  --roovix-btn-primary-bg-hover: #29903b;
  --roovix-btn-primary-bg-active: #2e9a40;
  --roovix-btn-primary-bg-disabled: #105823;
  --roovix-btn-primary-text: #ffffff;
  --roovix-btn-primary-text-disabled: #ffffff99;
  --roovix-btn-primary-border: rgba(255,255,255,0.1);
  
  --roovix-btn-default-bg: #212830;
  --roovix-btn-default-bg-hover: #262c36;
  --roovix-btn-default-bg-active: #2a313c;
  --roovix-btn-default-bg-disabled: #212830;
  --roovix-btn-default-text: #f0f6fc;
  --roovix-btn-default-border: #3d444d;
  
  --roovix-btn-danger-bg: #212830;
  --roovix-btn-danger-bg-hover: #b62324;
  --roovix-btn-danger-bg-active: #da3633;
  --roovix-btn-danger-text: #fa5e55;
  --roovix-btn-danger-text-hover: #ffffff;
  
  --roovix-btn-outline-bg: #212830;
  --roovix-btn-outline-bg-hover: #388bfd33;
  --roovix-btn-outline-text: #388bfd;
  --roovix-btn-outline-text-hover: #58a6ff;
  
  --roovix-btn-invisible-bg-hover: #656c7633;
  --roovix-btn-invisible-bg-active: #656c7640;
  
  --roovix-btn-star-color: #e3b341;
  
  /* Forms */
  --roovix-input-bg: #212830;
  --roovix-input-bg-hover: #262c36;
  --roovix-input-bg-active: #2a313c;
  --roovix-input-bg-disabled: #212830;
  --roovix-input-border: #3d444d;
  --roovix-input-border-focus: #1f6feb;
  --roovix-input-border-error: #da3633;
  --roovix-input-border-success: #238636;
  --roovix-input-text: #f0f6fc;
  --roovix-input-placeholder: #9198a1;
  
  --roovix-input-checked-bg: #1f6feb;
  --roovix-input-checked-bg-hover: #2a7aef;
  --roovix-input-checked-bg-active: #3685f3;
  --roovix-input-checked-border: #1f6feb;
  --roovix-input-knob-bg: #ffffff;
  
  /* Status Backgrounds */
  --roovix-status-success-bg: #238636;
  --roovix-status-success-bg-muted: #2ea04326;
  --roovix-status-success-border: #238636;
  
  --roovix-status-danger-bg: #da3633;
  --roovix-status-danger-bg-muted: #f851491a;
  --roovix-status-danger-border: #da3633;
  
  --roovix-status-warning-bg: #9e6a03;
  --roovix-status-warning-bg-muted: #bb800926;
  --roovix-status-warning-border: #9e6a03;
  
  --roovix-status-info-bg: #1f6feb;
  --roovix-status-info-bg-muted: #388bfd1a;
  --roovix-status-info-border: #1f6feb;
  
  --roovix-status-done-bg: #8957e5;
  --roovix-status-done-bg-muted: #ab7df826;
  --roovix-status-done-border: #8957e5;
  
  /* Code */
  --roovix-code-bg: #0d1117;
  --roovix-code-text: #f0f6fc;
  --roovix-code-comment: #656c76;
  --roovix-code-keyword: #ff7b72;
  --roovix-code-string: #a5d6ff;
  --roovix-code-constant: #79c0ff;
  --roovix-code-variable: #ffa657;
  --roovix-code-function: #d2a8ff;
  --roovix-code-tag: #7ee787;
  
  /* Shadows */
  --roovix-shadow-xs: 0px 1px 1px 0px #010409cc;
  --roovix-shadow-sm: 0px 1px 1px 0px #01040999, 0px 1px 3px 0px #01040999;
  --roovix-shadow-md: 0px 1px 1px 0px #01040966, 0px 3px 6px 0px #010409cc;
  --roovix-shadow-lg: 0px 6px 12px -3px #01040966, 0px 6px 18px 0px #01040966;
  --roovix-shadow-floating-sm: 0px 0px 0px 1px #3d444d, 0px 6px 12px -3px #01040966, 0px 6px 18px 0px #01040966;
  --roovix-shadow-floating-md: 0px 0px 0px 1px #3d444d, 0px 8px 16px -4px #01040966, 0px 4px 32px -4px #01040966;
  --roovix-shadow-inset: inset 0px 1px 0px 0px #0104093d;
  
  /* Avatars */
  --roovix-avatar-bg: rgba(255,255,255,0.1);
  --roovix-avatar-border: rgba(255,255,255,0.15);
  --roovix-avatar-stack-fade: #3d444d;
  
  /* Misc */
  --roovix-skeleton-bg: #656c7633;
  --roovix-progress-track: #3d444d;
  --roovix-progress-fill: #1f6feb;
  --roovix-selection-bg: #1f6febb3;
  --roovix-focus-outline: #1f6feb;
  --roovix-overlay-backdrop: #21283066;
}