/* ==========================================================================
   Jayalakshmi Jewellery ERP — design tokens (spec §3.1)
   ========================================================================== */

:root {
  /* ---- Backgrounds ---- */
  --bg-body:        #0A0A0A;
  --bg-sidebar:     #0D0B06;
  --bg-card:        #141210;
  --bg-card-2:      #1A1712;
  --bg-input:       #1E1A14;
  --bg-hover:       #241F16;

  /* ---- Gold palette ---- */
  --gold:           #D4AF37;
  --gold-bright:    #F0C75E;
  --gold-deep:      #A8842C;
  --gold-dim:       #8A6E2F;
  --gold-border:    rgba(212, 175, 55, 0.25);
  --gold-border-hi: rgba(212, 175, 55, 0.55);
  --gold-glow:      0 0 24px rgba(212, 175, 55, 0.12);
  --gold-grad:      linear-gradient(135deg, #F0C75E 0%, #D4AF37 45%, #A8842C 100%);

  /* ---- Text ---- */
  --text-hi:        #F5EFE2;
  --text-body:      #CFC6B4;
  --text-mut:       #8B8271;

  /* ---- Status ---- */
  --green:  #34C77B;  --green-bg:  rgba(52,199,123,.12);
  --red:    #E5484D;  --red-bg:    rgba(229,72,77,.12);
  --amber:  #F5A623;  --amber-bg:  rgba(245,166,35,.12);
  --blue:   #4A7DFF;  --blue-bg:   rgba(74,125,255,.12);
  --purple: #9B6DFF;  --purple-bg: rgba(155,109,255,.12);
  --teal:   #2BB8A3;  --teal-bg:   rgba(43,184,163,.12);

  /* ---- Payment buttons ---- */
  --pay-cash:  #2E7D46;
  --pay-upi:   #6A3FB5;
  --pay-card:  #2456A6;
  --pay-bank:  #8A6420;
  --pay-split: #1F7A6D;

  /* ---- Layout ---- */
  --sidebar-w: 232px;
  --radius:    10px;
  --radius-lg: 14px;
  --shadow:    0 8px 28px rgba(0,0,0,.45);

  /* ---- Type ---- */
  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', 'Cascadia Mono', Consolas, 'Courier New', monospace;
}

/* ---------------------------------------------------------------- reset -- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg-body);
  color: var(--text-body);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 { margin: 0; color: var(--text-hi); font-weight: 600; line-height: 1.25; }
p { margin: 0 0 10px; }
a { color: var(--gold); text-decoration: none; transition: color .15s; }
a:hover { color: var(--gold-bright); }

img, svg { max-width: 100%; vertical-align: middle; }

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }

/* Numbers and money read as tabular mono everywhere. */
.mono, .num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

.serif { font-family: var(--font-display); }

/* ----------------------------------------------------------- scrollbars -- */

* { scrollbar-width: thin; scrollbar-color: var(--gold-dim) transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--gold-dim); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--gold-deep); }

/* -------------------------------------------------------------- helpers -- */

.text-hi   { color: var(--text-hi); }
.text-mut  { color: var(--text-mut); }
.text-gold { color: var(--gold); }
.text-green { color: var(--green); }
.text-red   { color: var(--red); }
.text-amber { color: var(--amber); }

.text-right  { text-align: right; }
.text-center { text-align: center; }
.text-nowrap { white-space: nowrap; }

.fw-600 { font-weight: 600; }
.fw-700 { font-weight: 700; }

.fs-11 { font-size: 11px; }
.fs-12 { font-size: 12px; }
.fs-13 { font-size: 13px; }
.fs-16 { font-size: 16px; }
.fs-18 { font-size: 18px; }
.fs-22 { font-size: 22px; }
.fs-26 { font-size: 26px; }

.uc { text-transform: uppercase; letter-spacing: .08em; }

.mt-0 { margin-top: 0; }  .mt-4 { margin-top: 4px; }   .mt-8 { margin-top: 8px; }
.mt-12 { margin-top: 12px; } .mt-16 { margin-top: 16px; } .mt-20 { margin-top: 20px; }
.mb-0 { margin-bottom: 0; } .mb-4 { margin-bottom: 4px; } .mb-8 { margin-bottom: 8px; }
.mb-12 { margin-bottom: 12px; } .mb-16 { margin-bottom: 16px; } .mb-20 { margin-bottom: 20px; }
.ml-auto { margin-left: auto; }

.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.justify-end { justify-content: flex-end; }
.flex-wrap { flex-wrap: wrap; }
.flex-1 { flex: 1 1 auto; min-width: 0; }
.gap-4 { gap: 4px; }  .gap-6 { gap: 6px; }  .gap-8 { gap: 8px; }
.gap-12 { gap: 12px; } .gap-16 { gap: 16px; } .gap-20 { gap: 20px; }

.hidden { display: none !important; }
.w-full { width: 100%; }

.divider { height: 1px; background: var(--gold-border); border: 0; margin: 16px 0; }

.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Screen-reader only. */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}