/* ═══════════════════════════════════════════════════════════════════════════
   ShreeSai ERP — Weavinghands Rugs Pvt. Ltd.
   Design tokens — colors, type, spacing, radii, shadows
   Source of truth: index.html of ajpals/Shreesaierp (v2.64h+)
   ═══════════════════════════════════════════════════════════════════════════ */

:root {

  /* ── BRAND CORE ──────────────────────────────────────────────────────────
     Deep Navy + Gold + Warm Cream.
     Navy = trust, heritage. Gold = craftsmanship, value. Cream = paper, hands. */
  --wh-navy:         #0D1B2A;
  --wh-navy-mid:     #1C2D44;
  --wh-navy-light:   #2A4060;
  --wh-gold:         #C9A84C;
  --wh-gold-light:   #E8C96A;
  --wh-gold-muted:   rgba(201,168,76,0.12);
  --wh-gold-border:  rgba(201,168,76,0.18);
  --wh-cream:        #F5F0E8;
  --wh-cream-card:   #FFFDF8;
  --wh-cream-mid:    #EDE4CE;
  --wh-cream-dark:   #DDD0B0;

  /* ── INK ─────────────────────────────────────────────────────────────────
     Warm-brown text, not pure black. Reads like ink on cream. */
  --wh-text:         #2A1F0F;   /* primary copy */
  --wh-text-mid:     #6B5A3A;   /* labels, secondary */
  --wh-text-muted:   #A89070;   /* hints, captions */

  /* ── SIDEBAR INK (slightly different in dark mode) ─────────────────────── */
  --wh-sidebar-text:  #3D5A7A;
  --wh-sidebar-muted: #2D4A6A;

  /* ── STATUS COLORS ───────────────────────────────────────────────────────
     Muted earth-tone fills, not bright. Each is bg + text + (optional) border.
     Same scale used for stock state, badges, flow chips, toasts. */
  --stk-ok-bg:       #EAF3DE;
  --stk-ok-fg:       #27500A;
  --stk-ok-bd:       #A3C97E;

  --stk-low-bg:      #FAEEDA;   /* warning / soon / amber */
  --stk-low-fg:      #633806;
  --stk-low-bd:      #EF9F27;

  --stk-out-bg:      #FCEBEB;   /* error / delete / blocked */
  --stk-out-fg:      #A32D2D;
  --stk-out-bd:      #F09595;

  --bdg-client-bg:   #E1F5EE;   /* client / mint */
  --bdg-client-fg:   #085041;
  --bdg-client-bd:   #5DCAA5;

  --bdg-vendor-bg:   #E6F1FB;   /* vendor / sky */
  --bdg-vendor-fg:   #0C447C;
  --bdg-vendor-bd:   #85B7EB;

  --bdg-jw-bg:       #EEEDFE;   /* job worker / lavender */
  --bdg-jw-fg:       #3C3489;
  --bdg-jw-bd:       #9E99E8;

  --bdg-cost-bg:     #FBEAF0;   /* costing / blush */
  --bdg-cost-fg:     #72243E;

  --bdg-flat-bg:     #F5EEFF;   /* flat-rate / violet */
  --bdg-flat-fg:     #6B21A8;
  --bdg-flat-bd:     #C084FC;

  /* ── ROLE BADGES ─────────────────────────────────────────────────────────
     Each ERP role has its own pill colour. */
  --u-all-bg:        #FAEEDA;   /* Admin / Owner */
  --u-all-fg:        #633806;
  --u-all-bd:        #EF9F27;

  --u-mzp-bg:        #E1F5EE;   /* Mirzapur staff */
  --u-mzp-fg:        #085041;
  --u-mzp-bd:        #5DCAA5;

  --u-nda-bg:        #E6F1FB;   /* Noida staff */
  --u-nda-fg:        #0C447C;
  --u-nda-bd:        #85B7EB;

  /* ── SEMANTIC, LIGHT MODE (default) ──────────────────────────────────── */
  --sb-bg:           #FFFDF8;   /* sidebar */
  --sb-border:       #EDE4CE;
  --sb-text:         #6B5A3A;
  --sb-text-muted:   #C9B99A;
  --sb-sec-lbl:      #C9B99A;
  --sb-ni-hover:     rgba(201,168,76,0.07);
  --sb-ni-act-bg:    #FEF9ED;
  --sb-ni-act-txt:   #92692E;
  --sb-ni-act-ico:   #C9A84C;
  --sb-div:          #EDE4CE;

  --hdr-bg:          #FFFDF8;
  --hdr-border:      #EDE4CE;
  --hdr-title:       #0D1B2A;

  --content-bg:      #FAF7F0;   /* page canvas */
  --pg-bg:           #FAF7F0;
  --card-bg:         #FFFDF8;
  --card-border:     #EDE4CE;

  --text-primary:    #2A1F0F;
  --text-muted:      #A89070;

  --toggle-bg:       #FEF9ED;
  --toggle-border:   #EDE4CE;
  --toggle-text:     #92692E;

  /* Critical alert (red) */
  --notif-red:       #E24B4A;

  /* ── TYPOGRAPHY ──────────────────────────────────────────────────────────
     Two families only.
       • Serif (Georgia) — brand mark, the W glyph, login title.
       • System sans — everything else: UI, tables, forms, body.
     The product NEVER ships a webfont. It rides the host's UI stack. */
  --ff-display: Georgia, 'Iowan Old Style', 'Palatino Linotype', serif;
  --ff-sans:    -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui,
                'Helvetica Neue', Arial, sans-serif;
  --ff-mono:    ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Type scale — pulled from real CSS. ERP density is high. */
  --fs-9:   9px;     /* sidebar tag */
  --fs-10:  10px;    /* micro caps, hint */
  --fs-11:  11px;    /* small label, badge */
  --fs-12:  12px;    /* form field, body-small */
  --fs-13:  13px;    /* default body */
  --fs-14:  14px;    /* card field, modal title */
  --fs-15:  15px;    /* card heading, modal title */
  --fs-16:  16px;    /* card heading */
  --fs-20:  20px;    /* page H2 */
  --fs-22:  22px;    /* dashboard stat value */
  --fs-24:  24px;    /* login mark */

  --lh-tight: 1.2;
  --lh-base:  1.5;

  /* ── SPACE ───────────────────────────────────────────────────────────────
     4-px base. Use the named tokens — don't inline magic numbers. */
  --space-1: 4px;
  --space-2: 6px;
  --space-3: 8px;
  --space-4: 10px;
  --space-5: 12px;
  --space-6: 14px;
  --space-7: 16px;
  --space-8: 20px;
  --space-9: 24px;
  --space-10: 32px;

  /* ── RADII ───────────────────────────────────────────────────────────────
     Pills (20px) for status chips and tabs, 8px for buttons & inputs,
     12px for cards, 16px for the login panel. Never sharp corners. */
  --r-pill:  20px;
  --r-sm:    5px;
  --r-md:    6px;
  --r-lg:    8px;
  --r-xl:    10px;
  --r-2xl:   12px;
  --r-3xl:   16px;

  /* ── SHADOWS ─────────────────────────────────────────────────────────────
     Soft. The product rarely lifts cards — most depth is from cream-on-cream
     contrast and a thin 1px border. Shadows only on modals + popovers. */
  --shadow-popover: 0 6px 24px rgba(0,0,0,0.15);
  --shadow-modal:   0 8px 32px rgba(0,0,0,0.18);
  --shadow-card:    none;                              /* yes, none */
  --shadow-card-hover: 0 1px 4px rgba(13,27,42,0.04);

  /* ── BORDERS ─────────────────────────────────────────────────────────────
     One default weight. Inputs go heavier (1.5px) so they read crisply. */
  --bw-hair:   0.5px;
  --bw-1:      1px;
  --bw-input:  1.5px;

  /* ── LAYOUT ──────────────────────────────────────────────────────────── */
  --sidebar-w: 220px;
  --header-h:  52px;

  /* ── MOTION ──────────────────────────────────────────────────────────────
     Short, linear-ish ease. Hovers ~120ms, sidebar slide ~200ms. No bounces. */
  --ease:        cubic-bezier(.4,0,.2,1);
  --dur-fast:    120ms;
  --dur-base:    150ms;
  --dur-slide:   200ms;
}

/* ─── DARK MODE ─────────────────────────────────────────────────────────────
   Sidebar + header go navy. Page canvas + cards stay cream.
   Reads like a navy ledger with cream paper in the middle. */
body[data-theme="dark"] {
  --sb-bg:           #0D1B2A;
  --sb-border:       rgba(201,168,76,0.1);
  --sb-text:         #3D5A7A;
  --sb-text-muted:   #2A4060;
  --sb-sec-lbl:      #2A4060;
  --sb-ni-hover:     rgba(201,168,76,0.06);
  --sb-ni-act-bg:    rgba(201,168,76,0.1);
  --sb-ni-act-txt:   #E8C96A;
  --sb-ni-act-ico:   #C9A84C;
  --sb-div:          rgba(201,168,76,0.12);

  --hdr-bg:          #0D1B2A;
  --hdr-border:      rgba(201,168,76,0.1);
  --hdr-title:       #EDE8DA;

  --content-bg:      #F5F0E8;
  --pg-bg:           #F5F0E8;
  --card-bg:         #FFFDF8;
  --card-border:     #EDE4CE;

  --toggle-bg:       #0D1B2A;
  --toggle-border:   rgba(201,168,76,0.2);
  --toggle-text:     #C9A84C;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SEMANTIC ELEMENT STYLES — drop these into a page and you get the look.
   ═══════════════════════════════════════════════════════════════════════════ */

body {
  font-family: var(--ff-sans);
  font-size: var(--fs-13);
  line-height: var(--lh-base);
  color: var(--text-primary);
  background: var(--content-bg);
  -webkit-font-smoothing: antialiased;
}

h1 { font-family: var(--ff-display); font-size: var(--fs-20); font-weight: 500; color: var(--wh-navy); line-height: var(--lh-tight); }
h2 { font-size: var(--fs-20); font-weight: 500; color: var(--text-primary); }
h3 { font-size: var(--fs-15); font-weight: 500; color: var(--text-primary); }
h4 { font-size: var(--fs-14); font-weight: 600; color: var(--text-primary); }

label, .label {
  font-size: var(--fs-11);
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.1px;
}

.caps {
  font-size: var(--fs-10);
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

code, .mono {
  font-family: var(--ff-mono);
  font-size: var(--fs-12);
  color: var(--wh-navy);
}

a { color: var(--wh-gold); text-decoration: none; }
a:hover { color: var(--wh-gold-light); }