/* ==========================================================================
   FLCM Inventory Manager — Design System Tokens
   Loads AFTER pico.css, BEFORE style.css
   cache-bust: 2026-05-09
   ========================================================================== */

/* --- Google Fonts -------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@500;700&family=Inter:wght@400;500;600;700&display=swap');

/* ==========================================================================
   2. Typography Tokens
   ========================================================================== */
:root {
  /* Type scale (font-size / line-height) */
  --text-xs:    0.75rem;   /* 12px */
  --lh-xs:      1rem;      /* 16px */
  --text-sm:    0.8125rem; /* 13px */
  --lh-sm:      1.125rem;  /* 18px */
  --text-base:  0.875rem;  /* 14px */
  --lh-base:    1.375rem;  /* 22px */
  --text-md:    1rem;      /* 16px */
  --lh-md:      1.5rem;    /* 24px */
  --text-lg:    1.25rem;   /* 20px */
  --lh-lg:      1.75rem;   /* 28px */
  --text-xl:    1.5rem;    /* 24px */
  --lh-xl:      2rem;      /* 32px */
  --text-2xl:   2rem;      /* 32px */
  --lh-2xl:     2.5rem;    /* 40px */

  /* Font families */
  --font-primary: 'Inter', system-ui, -apple-system, sans-serif;
  --font-display: 'DM Sans', 'Inter', system-ui, sans-serif;

  /* Letter spacing */
  --tracking-tight:  -0.01em;
  --tracking-normal:  0;
  --tracking-wide:    0.02em;

  /* ==========================================================================
     3. Color System
     ========================================================================== */

  /* Brand & Accent */
  --brand-primary:        #1565c0;
  --brand-primary-hover:  #0d47a1;
  --brand-primary-light:  #e3f2fd;
  --brand-primary-subtle: #bbdefb;

  /* Signature Accent — "The Data Glow" */
  --accent-amber:       #f59e0b;
  --accent-amber-hover: #d97706;
  --accent-amber-light: #fef3c7;
  --accent-amber-dark:  #92400e;

  /* Semantic */
  --color-success:       #16a34a;
  --color-success-light: #dcfce7;
  --color-warning:       #ca8a04;
  --color-warning-light: #fef9c3;
  --color-error:         #dc2626;
  --color-error-light:   #fee2e2;
  --color-info:          #2563eb;
  --color-info-light:    #dbeafe;

  /* Warm Neutrals */
  --gray-50:  #fafaf9;
  --gray-100: #f5f5f4;
  --gray-200: #e7e5e4;
  --gray-300: #d6d3d1;
  --gray-400: #a8a29e;
  --gray-500: #78716c;
  --gray-600: #57534e;
  --gray-700: #44403c;
  --gray-800: #292524;
  --gray-900: #1c1917;

  /* Surface Tokens */
  --surface-page:    var(--gray-50);
  --surface-card:    #ffffff;
  --surface-sidebar: #1c1917;
  --surface-header:  #ffffff;
  --surface-overlay: rgba(28, 25, 23, 0.5);

  /* ==========================================================================
     4. Spacing Scale (base unit: 4px)
     ========================================================================== */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* ==========================================================================
     Border Radius Tokens
     ========================================================================== */
  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-lg:   8px;
  --radius-xl:  12px;
  --radius-full: 9999px;

  /* ==========================================================================
     Shadow Tokens
     ========================================================================== */
  --shadow-xs:  0 1px 2px rgba(28, 25, 23, 0.05);
  --shadow-sm:  0 1px 3px rgba(28, 25, 23, 0.1), 0 1px 2px rgba(28, 25, 23, 0.06);
  --shadow-md:  0 4px 6px -1px rgba(28, 25, 23, 0.1), 0 2px 4px -2px rgba(28, 25, 23, 0.1);
  --shadow-lg:  0 10px 15px -3px rgba(28, 25, 23, 0.1), 0 4px 6px -4px rgba(28, 25, 23, 0.1);
  --shadow-xl:  0 20px 25px -5px rgba(28, 25, 23, 0.1), 0 8px 10px -6px rgba(28, 25, 23, 0.1);

  /* ==========================================================================
     Transition Tokens
     ========================================================================== */
  --transition-fast:   150ms ease;
  --transition-base:   200ms ease;
  --transition-slow:   300ms ease;

  /* ==========================================================================
     Z-Index Scale
     ========================================================================== */
  --z-base:      0;
  --z-dropdown:  10;
  --z-sticky:    20;
  --z-fixed:     30;
  --z-overlay:   40;
  --z-modal:     50;
  --z-popover:   60;
  --z-toast:     70;
}

/* ==========================================================================
   Base Body Styles
   ========================================================================== */
/* Neutralize Pico CSS's viewport-responsive root font-size ramp.
 * Pico applies `:where(:root) { font-size: <%>; }` via @media queries
 * that scale from 100% at <576px up to 131.25% at 1536px. That made
 * every `rem`-based size in the app ~25% larger on typical desktops
 * (1280px breakpoint = 125% root = 20px instead of 16px), which
 * cascaded into oversized cards, sidebar items, and body text on
 * /help, /docs, and effectively every page. Anchor html to a fixed
 * 16px so the design-system scale (12/13/14/16/20/24/32 px) renders
 * exactly as DESIGN.md specifies regardless of viewport width. */
html {
  font-size: 16px;
}

body {
  font-family: var(--font-primary);
  font-size: var(--text-base);
  line-height: var(--lh-base);
  color: var(--gray-700);
  background-color: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ==========================================================================
   Tabular Nums Utility
   ========================================================================== */
.tabular-nums {
  font-variant-numeric: tabular-nums lining-nums;
}

/* ==========================================================================
   Display Font — H1 and .text-display
   ========================================================================== */
h1,
.text-display {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
}

/* ==========================================================================
   Amber Accent Line Utility
   ========================================================================== */
.flcm-accent-line {
  border-left: 3px solid var(--accent-amber);
}

/* ==========================================================================
   Reduced Motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   Focus-Visible Ring
   ========================================================================== */
:focus-visible {
  outline: 3px solid var(--brand-primary-subtle);
  outline-offset: 2px;
}