/* ============================================================================
   theme.css — the single source of truth for every colour, shade and font
   in Kioscopos. Added 2026-07-30.

   Every page used to declare its own :root block. The VALUES mostly agreed,
   but the secondary tokens had drifted (--success was #2ecc71 in one place and
   #10b981 in another, --danger #e74c3c vs #ef4444, --warn #f39c12 vs #d4af37,
   --muted #646464 vs #a0a0a0, three different --shadow depths) and the pages
   requested three different Google Fonts weight sets, so type rendered
   differently from screen to screen.

   Those per-page :root blocks have been REMOVED. This file is linked last on
   every page so it wins over styles.css and pos.css. If you need a new token,
   add it HERE — do not reintroduce a local :root.
   ========================================================================== */

:root {
  color-scheme: dark;

  /* ---- surfaces ---- */
  --bg-dark:        #0a0a0a;
  --bg-dark-2:      #141414;
  --bg-dark-3:      #1a1a1a;
  --bg-secondary:   #141414;
  --bg-tertiary:    #1a1a1a;
  --bg:             #0a0a0a;
  --bg-2:           #141414;
  --bg-3:           #1a1a1a;
  --surface:        #141414;
  --surface-2:      #1a1a1a;
  --surface-3:      #1a1a1a;

  /* ---- text ---- */
  --text-primary:   #ffffff;
  --text-secondary: #a0a0a0;
  --text-muted:     #646464;
  --text:           #ffffff;
  --muted:          #a0a0a0;

  /* ---- gold ---- */
  --accent-gold:       #d4af37;
  --accent-gold-hover: #f4d03f;
  --accent-gold-dim:   rgba(212, 175, 55, 0.15);
  --accent:            #d4af37;
  --accent-2:          #d4af37;
  --accent-hover:      #c9a226;
  --gold:              #d4af37;
  --gold-light:        #f4d03f;

  /* ---- lines ---- */
  --border-subtle: rgba(255, 255, 255, 0.08);
  --border:        rgba(255, 255, 255, 0.08);

  /* ---- status ---- */
  --success:  #10b981;
  --warn:     #f59e0b;
  --danger:   #ef4444;
  --disabled: #2a2a2a;
  --accent-green: #00764e;

  /* ---- shape & motion ---- */
  --radius:          0px;
  --shadow:          0 8px 32px rgba(0, 0, 0, 0.5);
  --shadow-soft:     0 4px 20px rgba(0, 0, 0, 0.35);
  --transition-base: 0.35s ease;

  /* ---- type ---- */
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;
  --font-display: 'Cormorant Garamond', Georgia, serif;

  /* ---- POS aliases (pos.css / driver) ---- */
  --pos-bg:            #0a0a0a;
  --pos-bg-2:          #141414;
  --pos-surface:       rgba(20, 20, 20, 0.92);
  --pos-surface-2:     #1a1a1a;
  --pos-surface-3:     rgba(255, 255, 255, 0.06);
  --pos-border:        rgba(255, 255, 255, 0.08);
  --pos-text:          #ffffff;
  --pos-muted:         #a0a0a0;
  --pos-accent:        #d4af37;
  --pos-accent-hover:  #c9a226;
  --pos-accent-2:      #b8941f;
  --pos-gold-dim:      rgba(212, 175, 55, 0.15);
  --pos-warning:       #f59e0b;
  --pos-danger:        #ef4444;
  --pos-success:       #10b981;
  --pos-disabled:      #1a1a1a;
  --pos-shadow:        0 24px 76px rgba(0, 0, 0, 0.50);
  --pos-shadow-soft:   0 16px 44px rgba(0, 0, 0, 0.35);
  --pos-topbar-scale:  1.35;
}

/* One type scale everywhere: Inter for text, Cormorant Garamond for headings. */
/* Literal stacks, not var() — one indirection fewer, and it still applies if a
   page's own body rule is more specific, because every page now names the same
   two families. */
body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
}
h1, h2, h3, h4, h5, h6 {
  font-family: 'Cormorant Garamond', Georgia, serif;
}

/* Logos are transparent PNG/SVG artwork — never sit them on a plate. */
.store-logo,
.login-logo,
.auth-logo,
.brand-logo,
.store-nav-logo-img {
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
}