/*
 * SMTL Design Tokens v1.0.0
 * Source of truth for all visual properties.
 * Every project imports this. No hardcoded values in components.
 *
 * Naming: --smtl-{category}-{property}-{variant}
 */

:root {
  /* ================================================================
   * BRAND COLORS
   * ================================================================ */

  /* Primary (Wisdom — deep indigo) */
  --smtl-brand-primary: #2D3561;
  --smtl-brand-primary-hover: #3D4571;
  --smtl-brand-primary-active: #4D5581;
  --smtl-brand-primary-light: #5D6591;
  --smtl-brand-primary-disabled: rgba(45, 53, 97, 0.25);

  /* Accent (Insight — warm gold) */
  --smtl-brand-accent: #D4A76A;
  --smtl-brand-accent-hover: #E4B77A;
  --smtl-brand-accent-active: #F4C78A;
  --smtl-brand-accent-light: #F4D7AA;
  --smtl-brand-accent-disabled: rgba(212, 167, 106, 0.25);

  /* ================================================================
   * SEMANTIC COLORS (Dark Theme — default)
   * ================================================================ */

  /* Backgrounds */
  --smtl-bg-app: #1E1E1E;
  --smtl-bg-sidebar: #252526;
  --smtl-bg-editor: #1E1E1E;
  --smtl-bg-panel: #181818;
  --smtl-bg-statusbar: #007ACC;
  --smtl-bg-hover: #2A2D2E;
  --smtl-bg-active: #37373D;
  --smtl-bg-elevated: #2D2D30;
  --smtl-bg-overlay: rgba(0, 0, 0, 0.5);

  /* Text */
  --smtl-text-primary: #CCCCCC;
  --smtl-text-secondary: #9D9D9D;
  --smtl-text-tertiary: #7D7D7D;
  --smtl-text-disabled: #6D6D6D;
  --smtl-text-link: #4FC3F7;
  --smtl-text-link-hover: #81D4FA;
  --smtl-text-inverse: #1E1E1E;
  --smtl-text-on-brand: #FFFFFF;

  /* Borders */
  --smtl-border-default: #3E3E42;
  --smtl-border-subtle: #2A2A2E;
  --smtl-border-strong: #4E4E52;
  --smtl-border-focus: #007ACC;
  --smtl-border-brand: var(--smtl-brand-primary);

  /* Status / Semantic */
  --smtl-color-success: #4CAF50;
  --smtl-color-success-bg: rgba(76, 175, 80, 0.1);
  --smtl-color-warning: #FFA726;
  --smtl-color-warning-bg: rgba(255, 167, 38, 0.1);
  --smtl-color-error: #EF5350;
  --smtl-color-error-bg: rgba(239, 83, 80, 0.1);
  --smtl-color-info: #29B6F6;
  --smtl-color-info-bg: rgba(41, 182, 246, 0.1);

  /* Evaluation Scores */
  --smtl-score-pass: #4CAF50;
  --smtl-score-pass-bg: rgba(76, 175, 80, 0.15);
  --smtl-score-review: #FFA726;
  --smtl-score-review-bg: rgba(255, 167, 38, 0.15);
  --smtl-score-fail: #EF5350;
  --smtl-score-fail-bg: rgba(239, 83, 80, 0.15);

  /* ================================================================
   * TYPOGRAPHY
   * ================================================================ */

  /* Font Families */
  --smtl-font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif;
  --smtl-font-mono: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;

  /* Font Sizes (1.125 ratio) */
  --smtl-font-size-xs: 10px;
  --smtl-font-size-sm: 12px;
  --smtl-font-size-base: 13px;
  --smtl-font-size-md: 14px;
  --smtl-font-size-lg: 16px;
  --smtl-font-size-xl: 18px;
  --smtl-font-size-2xl: 20px;
  --smtl-font-size-3xl: 24px;
  --smtl-font-size-4xl: 32px;

  /* Font Weights */
  --smtl-font-weight-normal: 400;
  --smtl-font-weight-medium: 500;
  --smtl-font-weight-semibold: 600;
  --smtl-font-weight-bold: 700;

  /* Line Heights */
  --smtl-line-height-tight: 1.2;
  --smtl-line-height-snug: 1.35;
  --smtl-line-height-normal: 1.5;
  --smtl-line-height-relaxed: 1.7;

  /* Letter Spacing */
  --smtl-letter-spacing-tight: -0.01em;
  --smtl-letter-spacing-normal: 0;
  --smtl-letter-spacing-wide: 0.02em;
  --smtl-letter-spacing-wider: 0.05em;

  /* ================================================================
   * SPACING (4px base scale)
   * ================================================================ */

  --smtl-space-0: 0;
  --smtl-space-px: 1px;
  --smtl-space-0-5: 2px;
  --smtl-space-1: 4px;
  --smtl-space-1-5: 6px;
  --smtl-space-2: 8px;
  --smtl-space-2-5: 10px;
  --smtl-space-3: 12px;
  --smtl-space-4: 16px;
  --smtl-space-5: 20px;
  --smtl-space-6: 24px;
  --smtl-space-8: 32px;
  --smtl-space-10: 40px;
  --smtl-space-12: 48px;
  --smtl-space-16: 64px;
  --smtl-space-20: 80px;
  --smtl-space-24: 96px;

  /* ================================================================
   * LAYOUT
   * ================================================================ */

  /* Fixed dimensions */
  --smtl-activitybar-width: 50px;
  --smtl-sidebar-width: 300px;
  --smtl-sidebar-min-width: 200px;
  --smtl-sidebar-max-width: 600px;
  --smtl-statusbar-height: 30px;
  --smtl-titlebar-height: 35px;
  --smtl-tab-height: 35px;
  --smtl-panel-min-height: 100px;

  /* Breakpoints */
  --smtl-breakpoint-mobile: 768px;
  --smtl-breakpoint-tablet: 1024px;
  --smtl-breakpoint-desktop: 1280px;
  --smtl-breakpoint-wide: 1600px;

  /* Z-index scale */
  --smtl-z-base: 0;
  --smtl-z-panel: 5;
  --smtl-z-editor: 10;
  --smtl-z-sidebar: 50;
  --smtl-z-activitybar: 100;
  --smtl-z-dropdown: 500;
  --smtl-z-modal: 1000;
  --smtl-z-tooltip: 2000;
  --smtl-z-notification: 3000;

  /* ================================================================
   * BORDER RADIUS
   * ================================================================ */

  --smtl-radius-none: 0;
  --smtl-radius-sm: 2px;
  --smtl-radius-base: 4px;
  --smtl-radius-md: 6px;
  --smtl-radius-lg: 8px;
  --smtl-radius-xl: 12px;
  --smtl-radius-full: 9999px;

  /* ================================================================
   * SHADOWS
   * ================================================================ */

  --smtl-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --smtl-shadow-base: 0 1px 3px rgba(0, 0, 0, 0.3);
  --smtl-shadow-md: 0 2px 8px rgba(0, 0, 0, 0.4);
  --smtl-shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.5);
  --smtl-shadow-xl: 0 8px 32px rgba(0, 0, 0, 0.6);

  /* ================================================================
   * ANIMATION / TRANSITIONS
   * ================================================================ */

  --smtl-duration-instant: 50ms;
  --smtl-duration-fast: 100ms;
  --smtl-duration-base: 200ms;
  --smtl-duration-slow: 300ms;
  --smtl-duration-slower: 500ms;

  --smtl-ease-default: ease;
  --smtl-ease-in: ease-in;
  --smtl-ease-out: ease-out;
  --smtl-ease-in-out: ease-in-out;

  --smtl-transition-fast: var(--smtl-duration-fast) var(--smtl-ease-default);
  --smtl-transition-base: var(--smtl-duration-base) var(--smtl-ease-default);
  --smtl-transition-slow: var(--smtl-duration-slow) var(--smtl-ease-default);

  /* ================================================================
   * COMPONENT TOKENS
   * ================================================================ */

  /* Buttons — Primary */
  --smtl-btn-primary-bg: var(--smtl-brand-primary);
  --smtl-btn-primary-bg-hover: var(--smtl-brand-primary-hover);
  --smtl-btn-primary-bg-active: var(--smtl-brand-primary-active);
  --smtl-btn-primary-bg-disabled: var(--smtl-brand-primary-disabled);
  --smtl-btn-primary-text: var(--smtl-text-on-brand);
  --smtl-btn-primary-border: transparent;

  /* Buttons — Secondary */
  --smtl-btn-secondary-bg: transparent;
  --smtl-btn-secondary-bg-hover: var(--smtl-bg-hover);
  --smtl-btn-secondary-bg-active: var(--smtl-bg-active);
  --smtl-btn-secondary-text: var(--smtl-text-primary);
  --smtl-btn-secondary-border: var(--smtl-border-default);

  /* Buttons — Destructive */
  --smtl-btn-destructive-bg: var(--smtl-color-error);
  --smtl-btn-destructive-bg-hover: #F44336;
  --smtl-btn-destructive-text: #FFFFFF;

  /* Buttons — Ghost */
  --smtl-btn-ghost-bg: transparent;
  --smtl-btn-ghost-bg-hover: var(--smtl-bg-hover);
  --smtl-btn-ghost-text: var(--smtl-text-secondary);

  /* Inputs */
  --smtl-input-bg: var(--smtl-bg-editor);
  --smtl-input-bg-disabled: var(--smtl-bg-panel);
  --smtl-input-border: var(--smtl-border-default);
  --smtl-input-border-focus: var(--smtl-border-focus);
  --smtl-input-border-error: var(--smtl-color-error);
  --smtl-input-text: var(--smtl-text-primary);
  --smtl-input-placeholder: var(--smtl-text-tertiary);
  --smtl-input-height: 32px;
  --smtl-input-height-sm: 26px;
  --smtl-input-height-lg: 40px;
  --smtl-input-padding: var(--smtl-space-2) var(--smtl-space-3);

  /* Cards */
  --smtl-card-bg: var(--smtl-bg-editor);
  --smtl-card-bg-hover: var(--smtl-bg-hover);
  --smtl-card-border: var(--smtl-border-subtle);
  --smtl-card-radius: var(--smtl-radius-base);
  --smtl-card-padding: var(--smtl-space-6);
  --smtl-card-shadow: var(--smtl-shadow-base);

  /* Tables */
  --smtl-table-header-bg: var(--smtl-bg-sidebar);
  --smtl-table-row-bg: transparent;
  --smtl-table-row-bg-hover: var(--smtl-bg-hover);
  --smtl-table-row-bg-selected: var(--smtl-bg-active);
  --smtl-table-row-bg-striped: rgba(255, 255, 255, 0.02);
  --smtl-table-border: var(--smtl-border-default);
  --smtl-table-cell-padding: var(--smtl-space-3) var(--smtl-space-4);

  /* Badges */
  --smtl-badge-bg: var(--smtl-brand-accent);
  --smtl-badge-text: var(--smtl-text-inverse);
  --smtl-badge-radius: var(--smtl-radius-full);
  --smtl-badge-padding: var(--smtl-space-0-5) var(--smtl-space-2);
  --smtl-badge-font-size: var(--smtl-font-size-xs);

  /* Tabs */
  --smtl-tab-bg: transparent;
  --smtl-tab-bg-active: var(--smtl-bg-editor);
  --smtl-tab-bg-hover: var(--smtl-bg-hover);
  --smtl-tab-text: var(--smtl-text-secondary);
  --smtl-tab-text-active: var(--smtl-text-primary);
  --smtl-tab-border-active: var(--smtl-brand-primary);
  --smtl-tab-height: var(--smtl-tab-height);

  /* Tooltips */
  --smtl-tooltip-bg: #383838;
  --smtl-tooltip-text: var(--smtl-text-primary);
  --smtl-tooltip-border: var(--smtl-border-strong);
  --smtl-tooltip-radius: var(--smtl-radius-base);
  --smtl-tooltip-padding: var(--smtl-space-1) var(--smtl-space-2);

  /* Scrollbar */
  --smtl-scrollbar-width: 10px;
  --smtl-scrollbar-track: transparent;
  --smtl-scrollbar-thumb: rgba(121, 121, 121, 0.4);
  --smtl-scrollbar-thumb-hover: rgba(121, 121, 121, 0.7);
}