/*
 * PierForge Brand Tokens
 * Aesthetic: Dark metallic industrial — graphite + electric blue + amber
 * Audience: Cross-border supply chain operators, importers, 3PLs
 */

:root {
  /* Core palette — graphite industrial */
  --pf-graphite-950: #0A0B0D;
  --pf-graphite-900: #0F1115;
  --pf-graphite-800: #16191F;
  --pf-graphite-700: #1E2229;
  --pf-graphite-600: #272C36;
  --pf-graphite-500: #323842;
  --pf-graphite-400: #434A56;
  --pf-graphite-300: #5C6374;
  --pf-graphite-200: #8892A4;
  --pf-graphite-100: #B8C0CC;

  /* Electric blue — accent, links, CTAs */
  --pf-blue-700: #1741A6;
  --pf-blue-600: #1D4ED8;
  --pf-blue-500: #2563EB;
  --pf-blue-400: #3B82F6;
  --pf-blue-300: #60A5FA;
  --pf-blue-200: #93C5FD;
  --pf-blue-100: #DBEAFE;
  --pf-blue-glow: rgba(37,99,235,.22);

  /* Amber — highlights, warnings, trade data */
  --pf-amber-600: #B45309;
  --pf-amber-500: #D97706;
  --pf-amber-400: #F59E0B;
  --pf-amber-300: #FCD34D;
  --pf-amber-100: #FEF3C7;
  --pf-amber-glow: rgba(245,158,11,.18);

  /* Status */
  --pf-green:     #22C55E;
  --pf-green-dim: rgba(34,197,94,.12);
  --pf-red:       #EF4444;
  --pf-red-dim:   rgba(239,68,68,.12);
  --pf-cyan:      #06B6D4;

  /* Semantic */
  --pf-bg:           var(--pf-graphite-950);
  --pf-bg-card:      var(--pf-graphite-800);
  --pf-surface:      var(--pf-graphite-700);
  --pf-surface-2:    var(--pf-graphite-600);
  --pf-border:       var(--pf-graphite-600);
  --pf-border-light: var(--pf-graphite-500);
  --pf-text:         #E8ECF2;
  --pf-text-muted:   var(--pf-graphite-100);
  --pf-text-dim:     var(--pf-graphite-200);
  --pf-accent:       var(--pf-blue-500);
  --pf-accent-hover: var(--pf-blue-600);
  --pf-highlight:    var(--pf-amber-400);

  /* Typography — straighter, denser, industrial */
  --pf-font-display: 'IBM Plex Sans', 'DM Sans', 'Helvetica Neue', Arial, sans-serif;
  --pf-font-body:    'Inter', 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --pf-font-mono:    'JetBrains Mono', 'IBM Plex Mono', 'Fira Code', monospace;
  --pf-font-cjk:     'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;

  /* Type scale */
  --pf-text-xs:   0.6875rem;
  --pf-text-sm:   0.8125rem;
  --pf-text-base: 1rem;
  --pf-text-md:   1.0625rem;
  --pf-text-lg:   1.25rem;
  --pf-text-xl:   1.5rem;
  --pf-text-2xl:  2rem;
  --pf-text-3xl:  2.625rem;
  --pf-text-4xl:  3.5rem;
  --pf-text-5xl:  4.75rem;

  /* Spacing */
  --pf-space-1:  0.25rem;
  --pf-space-2:  0.5rem;
  --pf-space-3:  0.75rem;
  --pf-space-4:  1rem;
  --pf-space-5:  1.25rem;
  --pf-space-6:  1.5rem;
  --pf-space-8:  2rem;
  --pf-space-10: 2.5rem;
  --pf-space-12: 3rem;
  --pf-space-16: 4rem;
  --pf-space-20: 5rem;
  --pf-space-24: 6rem;

  /* Border radius — tighter, industrial */
  --pf-radius-sm: 2px;
  --pf-radius:    4px;
  --pf-radius-md: 6px;
  --pf-radius-lg: 8px;
  --pf-radius-xl: 12px;

  /* Shadows */
  --pf-shadow-sm: 0 1px 2px rgba(0,0,0,.5);
  --pf-shadow-md: 0 4px 12px rgba(0,0,0,.5);
  --pf-shadow-lg: 0 12px 40px rgba(0,0,0,.6);
  --pf-shadow-blue: 0 0 0 1px rgba(37,99,235,.3), 0 4px 20px rgba(37,99,235,.12);

  /* Motion */
  --pf-dur-fast: 100ms;
  --pf-dur-base: 180ms;
  --pf-dur-slow: 320ms;
  --pf-ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* Layout */
  --pf-max-w: 1200px;
  --pf-nav-h: 60px;
}

/* Reset */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--pf-font-body);
  font-size: var(--pf-text-base);
  line-height: 1.6;
  color: var(--pf-text);
  background: var(--pf-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body.lang-zh { font-family: var(--pf-font-cjk); }

img, svg { display: block; max-width: 100%; }
a { color: var(--pf-blue-400); text-decoration: none; transition: color var(--pf-dur-fast); }
a:hover { color: var(--pf-blue-300); }

::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--pf-graphite-500); border-radius: 2px; }
::-webkit-scrollbar-thumb:hover { background: var(--pf-blue-600); }

/* Keyframes */
@keyframes pf-fade-up {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes pf-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes pf-slide-right {
  from { opacity: 0; transform: translateX(-16px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes pf-shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
@keyframes pf-pulse-blue {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.6; }
}

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