tfm_ainventory/frontend/app/globals.css

@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 */
    --background: #131313;
    --on-background: #e5e2e1;
    --foreground: #e5e2e1;

    /* Surface tones from DESIGN.md */
    --surface: #131313;
    --surface-dim: #131313;
    --surface-bright: #3a3939;
    --surface-container-lowest: #0e0e0e;
    --surface-container-low: #1c1b1b;
    --surface-container: #201f1f;
    --surface-container-high: #2a2a2a;
    --surface-container-highest: #353534;
    --surface-variant: #353534;

    /* Primary colors from DESIGN.md */
    --primary: #ffb781;
    --on-primary: #4e2600;
    --primary-container: #f58618;
    --on-primary-container: #5b2d00;
    --primary-fixed: #ffdcc4;
    --primary-fixed-dim: #ffb781;
    --on-primary-fixed: #2f1400;
    --on-primary-fixed-variant: #6f3800;
    --inverse-primary: #924c00;

    /* Secondary colors from DESIGN.md */
    --secondary: #c8c6c5;
    --on-secondary: #303030;
    --secondary-container: #474746;
    --on-secondary-container: #b7b5b4;
    --secondary-fixed: #e5e2e1;
    --secondary-fixed-dim: #c8c6c5;
    --on-secondary-fixed: #1b1c1c;
    --on-secondary-fixed-variant: #474746;

    /* Tertiary colors from DESIGN.md */
    --tertiary: #00e639;
    --on-tertiary: #003907;
    --tertiary-container: #00bd2d;
    --on-tertiary-container: #00440a;
    --tertiary-fixed: #72ff70;
    --tertiary-fixed-dim: #00e639;
    --on-tertiary-fixed: #002203;
    --on-tertiary-fixed-variant: #00530e;

    /* Error colors from DESIGN.md */
    --error: #ffb4ab;
    --on-error: #690005;
    --error-container: #93000a;
    --on-error-container: #ffdad6;

    /* Outline colors from DESIGN.md */
    --outline: #a48c7c;
    --outline-variant: #564335;

    /* Inverse colors from DESIGN.md */
    --inverse-surface: #e5e2e1;
    --inverse-on-surface: #313030;

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

  * {
    @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;
  }

  /* Strict "NO BOLD" enforcement from AI_RULES.md - Hierarchy via size and color only */
  *, *::before, *::after {
    font-weight: 400 !important;
  }

  /* No uppercase/italics as per AI_RULES.md and GEMINI.md */
  *, *::before, *::after {
    text-transform: none !important;
    font-style: normal !important;
  }

  /* Typography scale with proper letter-spacing per DESIGN.md */
  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 Fields: Darker than the container background per DESIGN.md */
  input, textarea, select {
    @apply bg-surface-container-lowest border border-outline text-foreground px-3 py-2 focus:border-primary focus:outline-none transition-colors;
    border-radius: 0 !important;
  }
}

@layer components {
  /* Button Styles: Rectangular with no radius */
  .btn-primary {
    @apply bg-primary text-on-primary px-4 py-2 hover:opacity-90 transition-opacity inline-flex items-center justify-center gap-2;
  }

  .btn-secondary {
    @apply bg-transparent border border-secondary text-secondary px-4 py-2 hover:border-foreground hover:text-foreground transition-colors inline-flex items-center justify-center gap-2;
  }

  .level-0 {
    @apply bg-surface;
  }

  /* Level 1 (Cards/Panels): surface-container with 1px border of outline-variant */
  .level-1 {
    @apply bg-surface-container border border-outline-variant;
  }

  /* Level 2 (Modals/Popovers): surface-container-high with 2px border of primary */
  .level-2 {
    @apply bg-surface-container-high border-2 border-primary;
  }

  .input-field {
    @apply bg-surface-container-lowest border border-outline text-foreground px-3 py-2 focus:border-primary focus:outline-none transition-colors;
  }

  /* Active State: 1px solid primary */
  .active-border {
    @apply border border-primary;
  }

  /* High-contrast status blocks: No rounded corners */
  .status-success {
    @apply bg-success text-on-tertiary px-2 py-0.5;
  }

  .status-alert {
    @apply bg-primary text-on-primary px-2 py-0.5;
  }

  /* Data Tables: Header cells with a subtle background tint */
  .table-header {
    @apply bg-surface-container-high border-b border-outline py-2 px-4 text-secondary text-sm font-normal;
  }

  /* Log Viewers: Background surface-container-lowest with outline border */
  .log-viewer {
    @apply bg-surface-container-lowest border border-outline p-4 font-mono mono-data overflow-y-auto;
  }

  /* Typography utilities for DESIGN.md semantic sizing */
  .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;
  }
}

/* Custom Industrial Scrollbar Styling per DESIGN.md */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

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

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

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

@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 text-muted-foreground tracking-tight mt-0.5;
  }

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

/* Safe Area Insets for Modern Mobile Devices */
.pb-safe {
  padding-bottom: env(safe-area-inset-bottom);
}

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

/* Accessibility: Respect user's reduced motion preference */
@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;
  }
}