/* Geist font loading - variable fonts for optimal performance */
@font-face {
  font-family: 'Geist';
  src: url('./assets/fonts/Geist-Variable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Geist Mono';
  src: url('./assets/fonts/GeistMono-Variable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@tailwind base;
@tailwind components;
@tailwind utilities;

@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

@layer base {
  :root {
    /* Light mode (secondary) */
    --background: 210 40% 98%;       /* #F8FAFC */
    --surface: 0 0% 100%;            /* #FFFFFF */
    --elevated: 210 40% 96%;         /* #F1F5F9 */
    --border: 214 32% 91%;           /* #E2E8F0 */
    --border-bright: 215 25% 75%;
    --text-primary: 222 47% 11%;     /* #0F172A */
    --text-secondary: 215 16% 47%;   /* #64748B */
    --text-muted: 215 20% 65%;
    --accent: 199 89% 48%;           /* #0EA5E9 */
    --accent-hover: 199 89% 40%;
    --accent-muted: 204 80% 16%;
    --ring: 199 89% 48%;

    /* Semantic/status (same in both modes) */
    --success: 142 71% 65%;          /* #4ADE80 */
    --warning: 43 96% 56%;           /* #FBBF24 */
    --error: 0 91% 71%;              /* #F87171 */
    --info: 217 91% 68%;             /* #60A5FA */
    --destructive: 0 84% 60%;

    /* Chart palette */
    --chart-1: 199 89% 60%;          /* #38BDF8 */
    --chart-2: 142 71% 65%;          /* #4ADE80 */
    --chart-3: 43 96% 56%;           /* #FBBF24 */
    --chart-4: 0 91% 71%;            /* #F87171 */
    --chart-5: 263 70% 76%;          /* #A78BFA */
    --chart-6: 27 96% 61%;           /* #FB923C */

    /* Device status */
    --online: 142 71% 65%;
    --offline: 0 91% 71%;
    --unknown: 215 20% 65%;

    /* Sidebar */
    --sidebar: 210 40% 98%;

    /* Functional tokens mapped to Tailwind names */
    --foreground: var(--text-primary);
    --card: var(--surface);
    --card-foreground: var(--text-primary);
    --popover: var(--surface);
    --popover-foreground: var(--text-primary);
    --primary: var(--accent);
    --primary-foreground: 0 0% 100%;
    --secondary: var(--elevated);
    --secondary-foreground: var(--text-primary);
    --muted: var(--elevated);
    --muted-foreground: var(--text-secondary);
    --input: var(--border);

    /* Border radius */
    --radius: 0.375rem;
  }

  .dark {
    --background: 222 47% 11%;       /* #0F172A */
    --surface: 217 33% 17%;          /* #1E293B */
    --elevated: 215 25% 27%;         /* #334155 */
    --border: 215 25% 27%;           /* #334155 */
    --border-bright: 215 20% 35%;    /* #475569 */
    --text-primary: 210 40% 96%;     /* #F1F5F9 */
    --text-secondary: 215 20% 65%;   /* #94A3B8 */
    --text-muted: 215 16% 47%;       /* #64748B */
    --accent: 199 89% 60%;           /* #38BDF8 */
    --accent-hover: 199 89% 48%;     /* #0EA5E9 */
    --accent-muted: 204 80% 16%;     /* #0C4A6E */
    --ring: 199 89% 60%;

    --foreground: var(--text-primary);
    --card: var(--surface);
    --card-foreground: var(--text-primary);
    --popover: var(--surface);
    --popover-foreground: var(--text-primary);
    --primary: var(--accent);
    --primary-foreground: 222 47% 11%;
    --secondary: var(--elevated);
    --secondary-foreground: var(--text-primary);
    --muted: 217 33% 17% / 0.5;
    --muted-foreground: var(--text-secondary);
    --input: var(--border);
    --sidebar: 222 47% 11%;
  }

  /* Reduced motion support -- DS-10 */
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation: none !important;
      transition: none !important;
      scroll-behavior: auto !important;
    }
  }

  * {
    box-sizing: border-box;
    border-color: hsl(var(--border));
  }

  html, body {
    margin: 0;
    padding: 0;
  }

  body {
    background-color: hsl(var(--background));
    color: hsl(var(--text-primary));
    font-family: 'Geist', 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
    font-size: 0.875rem;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  code, kbd, pre, samp, .font-mono {
    font-family: 'Geist Mono', ui-monospace, 'SFMono-Regular', monospace;
  }

  #root {
    min-height: 100vh;
  }

  /* Scrollbar styling */
  ::-webkit-scrollbar { width: 6px; height: 6px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb { background: hsl(var(--elevated)); border-radius: 3px; }
  ::-webkit-scrollbar-thumb:hover { background: hsl(var(--border-bright)); }
}
