/* Hancock wholesale — design tokens */
:root {
  /* Beer palette — pale ale foam → amber → stout */
  --paper:        #f6efde;       /* foam / pale ale head */
  --paper-2:      #ecdfba;       /* light amber */
  --paper-3:      #e0cf99;       /* mid amber line */
  --card:         #fcf6e3;       /* lager surface */
  --ink:          #2b1608;       /* stout — near-black warm */
  --ink-2:        #5a3416;       /* dark amber text */
  --ink-3:        #8a6234;       /* mid amber muted */
  --ink-4:        #b89263;       /* placeholder amber */

  /* Hancock red — matches the brand red on hancock.dk */
  --red:          #b1241a;
  --red-2:        #8e1a12;
  --red-soft:     #e0a39d;
  --red-bg:       #f5d6cf;

  /* Other accents */
  --gold:         #c08a2c;       /* fadøl, premium amber */
  --green:        #4d6b1f;       /* eco, packed status (hop green) */
  --blue:         #2f5e8a;       /* shipped */
  --orange:       #c2691c;       /* new */

  /* Layout */
  --rad:          4px;
  --rad-lg:       6px;
  --hairline:     #d2bb89;
  --shadow:       0 1px 0 rgba(26,22,18,0.04), 0 0 0 1px rgba(26,22,18,0.06);
}

/* Dark — used in moderator if user toggles */
.dark {
  --paper:        #1a1612;
  --paper-2:      #221c16;
  --paper-3:      #2c241d;
  --card:         #1f1812;
  --ink:          #f4ecdb;
  --ink-2:        #d4c8b0;
  --ink-3:        #9a8e76;
  --ink-4:        #6f6552;
  --hairline:     #3a3025;
}

* { box-sizing: border-box; }
body { margin: 0; font-family: "IBM Plex Sans", -apple-system, sans-serif; color: var(--ink); background: var(--paper); -webkit-font-smoothing: antialiased; }

.serif  { font-family: "Newsreader", Georgia, serif; font-feature-settings: "lnum" 1; letter-spacing:-0.005em;}
.mono   { font-family: "IBM Plex Mono", ui-monospace, monospace; }
.smallcaps { text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.72rem; font-weight: 500; color: var(--ink-3); }

/* Buttons */
.btn { display:inline-flex; align-items:center; gap:6px; height:36px; padding:0 14px; border-radius:var(--rad); font-weight:500; font-size:14px; cursor:pointer; transition:all .12s; border:1px solid transparent; white-space:nowrap; }
.btn-primary { background: var(--red); color:#fbf6e8; border-color: var(--red-2);}
.btn-primary:hover { background: var(--red-2); }
.btn-ghost   { background: transparent; color: var(--ink); border-color: var(--hairline); }
.btn-ghost:hover { background: var(--paper-2); }
.btn-solid   { background: var(--ink); color: var(--paper);}
.btn-solid:hover { background: #2c2520; }
.btn-sm { height:28px; padding:0 10px; font-size:12.5px; }

/* Inputs */
.field { height: 36px; padding: 0 12px; border-radius: var(--rad); border:1px solid var(--hairline); background:var(--card); color:var(--ink); font-size: 14px; font-family: inherit; }
.field:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(138,31,26,0.12); }
.field-mono { font-family:"IBM Plex Mono", monospace; letter-spacing:-.01em; }

/* Chips */
.chip { display:inline-flex; align-items:center; gap:6px; height:30px; padding: 0 11px; border-radius:999px; border:1px solid var(--hairline); background:var(--card); color:var(--ink-2); font-size:13px; cursor:pointer; transition:all .12s; }
.chip:hover { border-color: var(--ink-3); color: var(--ink); }
.chip.on { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* Cards & hairlines */
.card { background: var(--card); border:1px solid var(--hairline); border-radius: var(--rad-lg); }
.hairline { background: var(--hairline); }
.hr { height:1px; background: var(--hairline); border:none; margin: 0; }

/* Banner */
.banner { display:flex; align-items:center; gap:12px; padding: 8px 14px; border-bottom:1px solid var(--hairline); font-size: 13.5px; }
.banner.warn { background: #f5e2bd; color: #4a3a13; }
.banner.info { background: var(--paper-2); color: var(--ink-2); }

/* Stock dots */
.dot { width:8px; height:8px; border-radius:999px; display:inline-block; }

/* Tabular numerics for prices/qty */
.num { font-variant-numeric: tabular-nums; }

/* Subtle paper texture stripe for placeholder images */
.placeholder-bottle {
  background:
    repeating-linear-gradient(135deg, rgba(26,22,18,0.04) 0 2px, transparent 2px 8px),
    radial-gradient(ellipse 40% 60% at 50% 35%, rgba(138,31,26,0.10), transparent 70%),
    var(--paper-2);
}

/* Print */
@media print {
  body, .print-page { background: white !important; }
  .no-print { display: none !important; }
}

/* DCArtboard fix: allow scroll within when needed */
.scroll-y { overflow-y: auto; }