/* ==========================================================================
   PackFlow Comercial · base.css
   Tokens de marca (mismos colores que pack-flow.com), tema oscuro y reset.
   ========================================================================== */
:root {
  --bg: #fafaf7;
  --surface: #ffffff;
  --surface-2: #f5f4ef;
  --surface-3: #efeee8;
  --line: #e7e5dc;
  --line-2: #d6d3c7;
  --ink: #1a1a17;
  --text: #4a4a45;
  --muted: #8a8a82;
  --accent: #c2410c;
  --accent-hover: #9a3412;
  --accent-soft: #fdeee6;
  --side: #1a1a17;
  --side-ink: #e9e8e2;
  --side-muted: #8d8d85;
  --ok: #15803d;      --ok-soft: #e7f5ec;
  --warn: #b45309;    --warn-soft: #fdf3e2;
  --bad: #b91c1c;     --bad-soft: #fce9e9;
  --info: #1d4ed8;    --info-soft: #e8eefc;

  --f-display: "Montserrat", Arial, sans-serif;
  --f-body: "Manrope", Arial, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
  --r: 12px;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #12120f;
    --surface: #1b1b18;
    --surface-2: #22221e;
    --surface-3: #2a2a25;
    --line: #302f2a;
    --line-2: #3c3b35;
    --ink: #f3f2ec;
    --text: #c9c8c0;
    --muted: #8f8e86;
    --accent: #ea6a2c;
    --accent-hover: #f08a52;
    --accent-soft: #3a2216;
    --side: #0c0c0a;
    --side-muted: #7c7b74;
    --ok: #4ade80;   --ok-soft: #15291c;
    --warn: #fbbf24; --warn-soft: #2e2412;
    --bad: #f87171;  --bad-soft: #2f1818;
    --info: #93b4ff; --info-soft: #1a2238;
    color-scheme: dark;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font: 500 14px/1.5 var(--f-body);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3 { text-wrap: balance; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

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