/* brand.css — Shared design system for ShopReply AI.
 * Art direction: "Sale Closed" — the product's one job is closing orders, so the whole brand
 * is built on the receipt/register metaphor: warm thermal-paper, ink, money-green, monospace
 * figures, dashed dividers, and a ✓ CLOSED stamp. Linked by every page as the single source of
 * truth; page-specific CSS layers on top. */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,500;12..96,700;12..96,800&family=Instrument+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@500;700&display=swap');

:root {
  /* Deep-ink surfaces (Night Ops) */
  --paper:   #0b0e14;   /* near-black base */
  --paper2:  #12161f;   /* recessed panel */
  --ink:     #eef2f7;   /* light text */
  --ink2:    #aab4c2;   /* secondary text */
  --muted:   #6f7c8c;   /* captions, meta */
  --line:    #232b38;   /* luminous hairline */

  /* Electric accent (success = a closed sale) */
  --money:   #16e0a3;
  --money-d: #0fae7f;   /* hover / pressed */
  --money-l: #46f0be;   /* lighter, for gradients */
  --money-bg:rgba(22,224,163,.12);   /* tinted fill */
  --cyan:    #38bdf8;   /* secondary electric */

  /* Sparingly: alert + aged gold */
  --stamp:   #ff6b5e;
  --gold:    #cbb78a;
  --danger:  #ff6b5e;

  /* Deepest ink for footers / bands */
  --dark:    #060810;

  /* Back-compat aliases */
  --brand:   #16e0a3;
  --brand2:  #46f0be;
  --ok:      #16e0a3;
  --soft:    #12161f;
  --card:    #131824;
  --glass:   linear-gradient(160deg, rgba(255,255,255,.055), rgba(255,255,255,.02));

  /* Type roles */
  --font-display: 'Bricolage Grotesque', 'Instrument Sans', system-ui, sans-serif;
  --font: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
}

body {
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Register-label eyebrow: small mono caps with tracking, like the header on a receipt. */
.eyebrow, .reg-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}

/* Every number that represents money / a count should be monospaced + tabular so columns line up
 * like a printed bill. Add class="fig" to totals, prices, counters. */
.fig { font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }

/* The signature: a receipt "ticket" with perforated (zig-zag) top and bottom edges.
 * Use .ticket on a container; the ::before/::after cut the perforation. */
.ticket {
  position: relative;
  background: var(--paper);
  color: var(--ink);
  border-left: 1px dashed var(--line);
  border-right: 1px dashed var(--line);
  padding: 22px 22px 24px;
}
.ticket::before, .ticket::after {
  content: ""; position: absolute; left: -1px; right: -1px; height: 10px;
  /* zig-zag perforation cut into the paper edge */
  background:
    radial-gradient(circle at 6px -1px, transparent 6px, var(--paper) 6.5px) repeat-x;
  background-size: 12px 10px;
}
.ticket::before { top: -9px; transform: scaleY(-1); }
.ticket::after  { bottom: -9px; }

/* ✓ CLOSED stamp — rotated, inky, slightly rough. Use on closed orders / proof moments. */
.stamp {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-weight: 700; font-size: 13px; letter-spacing: .1em;
  color: var(--money); border: 2px solid var(--money); border-radius: 8px;
  padding: 3px 10px; transform: rotate(-6deg); text-transform: uppercase;
  opacity: .92;
}
.stamp.red { color: var(--stamp); border-color: var(--stamp); }

/* Dashed divider — the receipt rule used to separate line items from totals. */
.rule-dash { border: 0; border-top: 1.5px dashed var(--line); margin: 12px 0; }

/* Accessible focus ring in the money accent. */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, .cta:focus-visible {
  outline: 3px solid rgba(14, 124, 90, .38);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}