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

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

@layer base {
        :root {
    /* Base colors from DESIGN.md - AUTO-GENERATED from colors.mjs */

    /* Base colors from DESIGN.md */
    --background: #131313;
    --on-background: #dde4f0;
    --foreground: #dde4f0;

    /* Surface colors from DESIGN.md */
    --surface-DEFAULT: #131313;
    --surface-dim: #131313;
    --surface-bright: #1e2535;
    --surface-container-lowest: #0a0c14;
    --surface-container-low: #131824;
    --surface-container: #181e2e;
    --surface-container-high: #1e2538;
    --surface-container-highest: #252d42;
    --surface-variant: #252d42;

    /* Primary colors from DESIGN.md */
    --primary-DEFAULT: #58a6ff;
    --primary-foreground: #001a4d;
    --primary-container: #1d6fd4;
    --primary-on-container: #cce0ff;
    --primary-fixed: #cce0ff;
    --primary-fixed-dim: #58a6ff;
    --primary-on-fixed: #001533;
    --primary-on-fixed-variant: #003380;
    --primary-inverse: #1d5fa8;

    /* Secondary colors from DESIGN.md */
    --secondary-DEFAULT: #9aa5be;
    --secondary-foreground: #1a2030;
    --secondary-container: #3d4d6b;
    --secondary-on-container: #bdc8e0;
    --secondary-fixed: #dde4f0;
    --secondary-fixed-dim: #9aa5be;
    --secondary-on-fixed: #0d1220;
    --secondary-on-fixed-variant: #3d4d6b;

    /* Tertiary colors from DESIGN.md */
    --tertiary-DEFAULT: #00d4aa;
    --tertiary-foreground: #003328;
    --tertiary-container: #00a882;
    --tertiary-on-container: #b3fff0;
    --tertiary-fixed: #b3fff0;
    --tertiary-fixed-dim: #00d4aa;
    --tertiary-on-fixed: #002820;
    --tertiary-on-fixed-variant: #005544;

    /* Error colors from DESIGN.md */
    --error-DEFAULT: #ff5f52;
    --error-foreground: #1a0000;
    --error-container: #7a0000;
    --error-on-container: #ffdad6;

    /* Outline colors from DESIGN.md */
    --outline: #3d5a8a;
    --outline-variant: #1e3055;

    /* Inverse colors from DESIGN.md */
    --inverse-surface: #dde4f0;
    --inverse-on-surface: #1a2030;

    /* Semantic colors from DESIGN.md */
    --border: #252d42;
    --muted: #5a6a8a;
    --info: #58a6ff;
    --success: #00d4aa;
    --warning: #f0a040;
    --alert: #ff5f52;

    /* Semantic spacing tokens */
    --spacing-unit: 4px;
    --spacing-stack-sm: 8px;
    --spacing-stack-md: 16px;
    --spacing-gutter: 16px;
    --spacing-margin: 32px;
    --spacing-container-gap: 24px;
  }




  * {
    @apply border-border;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  body {
    @apply bg-background text-foreground antialiased font-normal;
    font-family: 'Space Grotesk', sans-serif;
    letter-spacing: -0.01em;
  }

  *, *::before, *::after {
    font-weight: 400 !important;
  }

  *, *::before, *::after {
    text-transform: none !important;
    font-style: normal !important;
  }

  h1 {
    @apply text-5xl tracking-tighter;
    letter-spacing: -0.02em;
  }

  h2 {
    @apply text-4xl tracking-tight;
    letter-spacing: -0.01em;
  }

  h3, h4, h5, h6 {
    @apply tracking-tight;
  }

  input, textarea, select {
    background-color: var(--surface-container-lowest);
    border: 1px solid var(--outline);
    color: var(--foreground);
    padding: 0.5rem 0.75rem;
    border-radius: 0 !important;
    transition: border-color 0.2s;
  }

  input:focus, textarea:focus, select:focus {
    border-color: var(--primary-DEFAULT);
    outline: none;
  }
}

@layer components {
  .btn-primary {
    background-color: var(--primary-DEFAULT);
    color: var(--primary-foreground);
    padding: 0.5rem 1rem;
    @apply inline-flex items-center justify-center gap-2 transition-opacity hover:opacity-90;
    border-radius: 0 !important;
  }

  .btn-secondary {
    background-color: transparent;
    border: 1px solid var(--secondary-DEFAULT);
    color: var(--secondary-DEFAULT);
    padding: 0.5rem 1rem;
    @apply inline-flex items-center justify-center gap-2 transition-colors;
    border-radius: 0 !important;
  }

  .btn-secondary:hover {
    border-color: var(--foreground);
    color: var(--foreground);
  }

  .level-0 {
    background-color: var(--surface-DEFAULT);
  }

  .level-1 {
    @apply border;
    background-color: var(--surface-container);
    border-color: var(--outline-variant);
  }

  .level-2 {
    background-color: var(--surface-container-high);
    border: 2px solid var(--primary-DEFAULT);
    border-radius: 0 !important;
  }

  .input-field {
    background-color: var(--surface-container-lowest);
    border: 1px solid var(--outline);
    color: var(--foreground);
    padding: 0.75rem;
    border-radius: 0 !important;
    transition: border-color 0.2s;
  }

  .input-field:focus {
    border-color: var(--primary-DEFAULT);
    outline: none;
  }

  .active-border {
    @apply border;
    border-color: var(--primary-DEFAULT);
  }

  .status-success {
    background-color: var(--tertiary-DEFAULT);
    color: var(--tertiary-foreground);
    padding: 0.125rem 0.5rem;
    border-radius: 0 !important;
  }

  .status-alert {
    background-color: var(--primary-DEFAULT);
    color: var(--primary-foreground);
    padding: 0.125rem 0.5rem;
    border-radius: 0 !important;
  }

  .table-header {
    background-color: var(--surface-container-high);
    border-bottom: 1px solid var(--outline);
    padding: 0.5rem 1rem;
    color: var(--secondary-DEFAULT);
    font-size: 0.875rem;
    font-weight: normal;
  }

  .log-viewer {
    background-color: var(--surface-container-lowest);
    border: 1px solid var(--outline);
    padding: 1rem;
    font-family: 'Space Grotesk', monospace;
    font-variant-numeric: tabular-nums;
    overflow-y: auto;
    border-radius: 0 !important;
  }

  .headline-lg {
    @apply text-5xl font-normal;
    letter-spacing: -0.02em;
    line-height: 1.1;
  }

  .headline-md {
    @apply text-4xl font-normal;
    letter-spacing: -0.01em;
    line-height: 1.2;
  }

  .headline-sm {
    @apply text-2xl font-normal;
    line-height: 1.2;
  }

  .body-lg {
    @apply text-lg font-normal;
    line-height: 1.5;
  }

  .body-md {
    @apply text-base font-normal;
    line-height: 1.5;
  }

  .label-md {
    @apply text-sm font-normal;
    letter-spacing: 0.05em;
    line-height: 1;
  }

  .mono-data {
    @apply text-sm font-normal;
    font-family: 'Space Grotesk', monospace;
    letter-spacing: 0.02em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
  }
}

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--surface-DEFAULT);
}

::-webkit-scrollbar-thumb {
  background: var(--outline-variant);
  border-radius: 0;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--primary-DEFAULT);
}

@layer utilities {
  .text-fluid-lg {
    font-size: clamp(1.125rem, 3cqi, 1.5rem);
  }

  .text-fluid-xl {
    font-size: clamp(1.5rem, 5cqi, 2.25rem);
  }

  .card-title {
    @apply text-base font-normal tracking-tight;
  }

  .card-subtitle {
    @apply text-xs font-normal tracking-tight;
    color: var(--muted);
    margin-top: 0.125rem;
  }

  .legacy-mono-data {
    @apply font-normal tracking-normal;
    font-variant-numeric: tabular-nums;
  }
}

.pb-safe {
  padding-bottom: env(safe-area-inset-bottom);
}

.pt-safe {
  padding-top: env(safe-area-inset-top);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .animate-scan-fast,
  .animate-spin-slow,
  .animate-pulse {
    animation: none !important;
  }
}