/* Telos Creative SEO Dashboard — Design Tokens */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

:root {
  /* Brand — Telos Creative */
  --tc-primary: #6AABB5;
  --tc-primary-dark: #4A8A94;
  --tc-primary-light: #8DC5CD;
  --tc-primary-glow: rgba(106, 171, 181, 0.15);
  --tc-secondary: #808B94;
  --tc-accent: #D4A853;
  --tc-accent-hover: #C09843;

  /* Dashboard backgrounds */
  --bg-body: #0F1B2B;
  --bg-sidebar: #162233;
  --bg-header: #162233;
  --bg-card: #1A2940;
  --bg-card-hover: #1E3050;
  --bg-input: #1A2940;
  --bg-modal: #1A2940;
  --bg-tooltip: #253A52;

  /* Text */
  --text-primary: #FFFFFF;
  --text-secondary: rgba(255, 255, 255, 0.7);
  --text-muted: rgba(255, 255, 255, 0.55);
  --text-inverse: #0F1B2B;

  /* Borders */
  --border-color: rgba(255, 255, 255, 0.08);
  --border-color-hover: rgba(255, 255, 255, 0.15);
  --border-radius: 12px;
  --border-radius-sm: 8px;
  --border-radius-xs: 6px;

  /* Score colors */
  --score-excellent: #22C55E;
  --score-good: #84CC16;
  --score-fair: #EAB308;
  --score-poor: #F59E0B;
  --score-critical: #EF4444;

  /* Severity */
  --severity-critical: #EF4444;
  --severity-critical-bg: rgba(239, 68, 68, 0.1);
  --severity-warning: #F59E0B;
  --severity-warning-bg: rgba(245, 158, 11, 0.1);
  --severity-notice: #6AABB5;
  --severity-notice-bg: rgba(106, 171, 181, 0.1);
  --severity-pass: #22C55E;
  --severity-pass-bg: rgba(34, 197, 94, 0.1);

  /* Position colors */
  --pos-top3: #22C55E;
  --pos-top10: #6AABB5;
  --pos-top20: #F59E0B;
  --pos-below20: #EF4444;
  --pos-unranked: #808B94;

  /* Change indicators */
  --change-up: #22C55E;
  --change-down: #EF4444;
  --change-stable: #808B94;

  /* Priority */
  --priority-high: #EF4444;
  --priority-medium: #F59E0B;
  --priority-low: #22C55E;

  /* Layout */
  --header-height: 64px;
  --sidebar-width: 260px;
  --content-max-width: 1200px;
  --mobile-breakpoint: 1024px;
  --section-gap: 28px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.25);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.3);
  --shadow-glow: 0 0 20px rgba(106, 171, 181, 0.15);
  --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.15);
  --shadow-card-hover: 0 4px 16px rgba(0, 0, 0, 0.25);

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-normal: 250ms ease;
  --transition-slow: 400ms ease;

  /* Typography */
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'SF Mono', 'Cascadia Code', Consolas, monospace;

  /* Z-index layers */
  --z-sidebar: 100;
  --z-header: 200;
  --z-backdrop: 300;
  --z-modal: 400;
  --z-tooltip: 500;
}

/* Reset */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-body);
  background: var(--bg-body);
  color: var(--text-primary);
  line-height: 1.5;
  overflow-x: hidden;
}

a {
  color: var(--tc-primary);
  text-decoration: none;
}

a:hover {
  color: var(--tc-primary-light);
}

/* Scrollbar */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.25);
}