/* ============================================================
   RANG — SIRF YAHAN
   Asool (docs/DECISIONS.md, hissa 6.1): koi rang kisi aur file mein hardcode nahi.
   Sab yahan tokens ki shakl mein. Ek jagah badla, poore software mein badal gaya.

   Teen halaat:
     :root                              → light (buniyad)
     @media (prefers-color-scheme:dark) → computer ki setting dark hai
     [data-theme="dark"] / ["light"]    → user ne khud chuna (ye sab par bhaari hai)
   ============================================================ */

:root {
  /* --- Zameen aur satah --- */
  --bg:            #f6f6fb;   /* poore safhe ka background — halka sa banafshi */
  --bg-tint:       #eef0fa;   /* safhe ke kone ka halka sa ujala */
  --surface:       #ffffff;   /* cards, tables, panels */
  --surface-2:     #f4f5fa;   /* halka farq — table ki header, hover */
  --surface-3:     #eceef6;   /* aur ek darja — dabaya hua button */
  --border:        #e7e9f2;   /* ab lakeer halki hai; kaam sayaa karta hai */
  --border-strong: #ccd0e0;

  /* --- Likhawat --- */
  --text:          #191c2b;   /* asal text */
  --text-muted:    #656d84;   /* kam ahem — labels, madad ka text */
  --text-faint:    #949cb2;   /* sab se halka — placeholder */

  /* --- Buniyadi rang --- */
  --primary:       #574fd6;   /* asal button, links (safed par 5.98:1) */
  --primary-hover: #453cc4;
  --primary-text:  #ffffff;
  --primary-soft:  #eeecfb;   /* chuna hua nav, halka nishan */
  /* Tile ke kone ka ujala. Roshni mein `--primary-soft` theek tha, magar
     andhere mein wohi rang card se HALKA par jata hai aur ujale ki jagah
     mail ka dhabba lagta hai. Is liye ab har theme ka apna. */
  --tile-glow:     #eeecfb;
  --primary-soft-text: #4a41cc;
  --focus:         #574fd6;   /* keyboard se chalne wale ke liye — bohot ahem */

  /* --- Halat ke rang --- */
  --success:       #0f7a4a;   /* bikri mukammal, munafa */
  --success-bg:    #e4f5ec;
  --warning:       #9a5b00;   /* stock kam */
  --warning-bg:    #fdf1de;
  --danger:        #c02626;   /* mitana, ghalti */
  --danger-bg:     #fdebeb;
  --info:          #1668c1;
  --info-bg:       #e7f0fb;

  /* --- Nishan ki tikiyan (dashboard ke chhote murabbe) ---
     Har khane ka apna rang hota hai to aankh use bina parhe pehchan leti
     hai. Rang sirf sajawat nahi — dobara dhoondhne ka rasta hai. */
  --tile-1-bg: #eceafc;  --tile-1-fg: #5348d4;   /* bikri */
  --tile-2-bg: #e4f5ec;  --tile-2-fg: #0f7a4a;   /* mahina, munafa */
  --tile-3-bg: #fdf1de;  --tile-3-fg: #9a5b00;   /* saamaan */
  --tile-4-bg: #fdebeb;  --tile-4-fg: #c02626;   /* kami, khatra */
  --tile-5-bg: #e7f0fb;  --tile-5-fg: #1668c1;   /* log, khata */
  --tile-6-bg: #f5eafb;  --tile-6-fg: #8531b8;   /* baqi */

  /* --- Naap ---
     Kone pehle 8px the. Ab bare hain: card 16, control 10. Ye sirf
     khoobsurati nahi — bara kona nazar ko batata hai ke ye ek alag,
     poora khana hai, aur lakeer ki zaroorat kam par jati hai. */
  --radius:      12px;
  --radius-sm:   9px;
  --radius-lg:   16px;
  --radius-pill: 999px;
  --gap:         12px;
  --gap-lg:      20px;

  /* POS ke buttons bare hone chahiyen — jaldi mein ungli theek jagah pare */
  --control-h:   44px;
  --control-h-lg: 56px;

  /* Sayaa halka aur do darje ka — nazdeek wali halki lakeer, door wali
     phaili hui. Isi se card "uthta hua" lagta hai bina moti lakeer ke. */
  --shadow-sm: 0 1px 2px rgba(20, 24, 50, .05);
  --shadow:    0 1px 2px rgba(20, 24, 50, .04), 0 6px 16px -6px rgba(20, 24, 50, .10);
  --shadow-lg: 0 12px 32px -8px rgba(20, 24, 50, .18);

  /* --- Gradient aur sheesha ---
     Aik hi accent gradient poore software mein: neel se banafshi. Ye brand
     hai, sajawat nahi — isi liye yahan ek jagah likha hai. */
  --accent-1: #6366f1;
  --accent-2: #8b5cf6;
  --gradient: linear-gradient(135deg, var(--accent-1), var(--accent-2));
  --glow:     0 8px 24px -8px rgba(99, 102, 241, .45);

  /* Sheesha (glass): aadha shafaaf satah + peeche dhundla.
     `--glass` woh rang hai jo blur na chalne par bhi theek dikhe — ye
     ehtiyat hai, purane computer aksar backdrop-filter nahi chalate. */
  --glass:      rgba(255, 255, 255, .72);
  --glass-line: rgba(255, 255, 255, .60);
  --blur:       blur(14px) saturate(140%);

  /* --- Font ---
     Teen font, teen kaam. Teenon software ke saath jate hain
     (shared/theme/fonts/) — CDN par bharosa nahi, software offline chalta hai. */
  --font: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  /* Urdu: pehle Nastaliq (jo bohat se Pakistani computer par pehle se hota
     hai aur parhne mein sab se apna lagta hai), warna sath aane wala
     Noto Sans Arabic. */
  --font-urdu: "Noto Nastaliq Urdu", "Jameel Noori Nastaleeq", "Noto Sans Arabic", var(--font);
  --font-mono: "JetBrains Mono", "Consolas", "DejaVu Sans Mono", monospace;

  /* Paise aur tadaad — hamesha ek jaisi chaurai, taake number seedhe qatar mein rahen */
  --font-number: var(--font-mono);
}

/* Computer ki apni setting dark hai, aur user ne khud kuch nahi chuna */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:            #101219;
    --bg-tint:       #171a25;
    --surface:       #191d27;
    --surface-2:     #212633;
    --surface-3:     #2a3040;
    --border:        #2b3140;
    --border-strong: #414962;

    --text:          #e9ecf3;
    --text-muted:    #a3abbe;
    --text-faint:    #737c92;

    --primary:       #9a94f7;
    --primary-hover: #b0abfa;
    --primary-text:  #14121f;
    --primary-soft:  #262441;
    --tile-glow:     rgba(255, 255, 255, .05);
    --primary-soft-text: #b0abfa;
    --focus:         #b0abfa;

    --success:       #58c896;
    --success-bg:    #133327;
    --warning:       #e0a950;
    --warning-bg:    #372a15;
    --danger:        #f08585;
    --danger-bg:     #391d1f;
    --info:          #63a4ec;
    --info-bg:       #15273c;

    --tile-1-bg: #262441;  --tile-1-fg: #a49df8;
    --tile-2-bg: #133327;  --tile-2-fg: #58c896;
    --tile-3-bg: #372a15;  --tile-3-fg: #e0a950;
    --tile-4-bg: #391d1f;  --tile-4-fg: #f08585;
    --tile-5-bg: #15273c;  --tile-5-fg: #63a4ec;
    --tile-6-bg: #2e1f3d;  --tile-6-fg: #cd93ec;

    --accent-1: #7c80ff;
    --accent-2: #a78bfa;
    --glow:     0 8px 24px -8px rgba(124, 128, 255, .40);
    --glass:      rgba(25, 29, 39, .68);
    --glass-line: rgba(255, 255, 255, .07);

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .40);
    --shadow:    0 1px 2px rgba(0, 0, 0, .40), 0 6px 16px -6px rgba(0, 0, 0, .60);
    --shadow-lg: 0 12px 32px -8px rgba(0, 0, 0, .70);
  }
}

/* User ne khud dark chuna — computer ki setting se bhaari */
:root[data-theme="dark"] {
  --bg:            #101219;
  --bg-tint:       #171a25;
  --surface:       #191d27;
  --surface-2:     #212633;
  --surface-3:     #2a3040;
  --border:        #2b3140;
  --border-strong: #414962;

  --text:          #e9ecf3;
  --text-muted:    #a3abbe;
  --text-faint:    #737c92;

  --primary:       #9a94f7;
  --primary-hover: #b0abfa;
  --primary-text:  #14121f;
  --primary-soft:  #262441;
  --tile-glow:     rgba(255, 255, 255, .05);
  --primary-soft-text: #b0abfa;
  --focus:         #b0abfa;

  --success:       #58c896;
  --success-bg:    #133327;
  --warning:       #e0a950;
  --warning-bg:    #372a15;
  --danger:        #f08585;
  --danger-bg:     #391d1f;
  --info:          #63a4ec;
  --info-bg:       #15273c;

  --tile-1-bg: #262441;  --tile-1-fg: #a49df8;
  --tile-2-bg: #133327;  --tile-2-fg: #58c896;
  --tile-3-bg: #372a15;  --tile-3-fg: #e0a950;
  --tile-4-bg: #391d1f;  --tile-4-fg: #f08585;
  --tile-5-bg: #15273c;  --tile-5-fg: #63a4ec;
  --tile-6-bg: #2e1f3d;  --tile-6-fg: #cd93ec;

  --accent-1: #7c80ff;
  --accent-2: #a78bfa;
  --glow:     0 8px 24px -8px rgba(124, 128, 255, .40);
  --glass:      rgba(25, 29, 39, .68);
  --glass-line: rgba(255, 255, 255, .07);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .40);
  --shadow:    0 1px 2px rgba(0, 0, 0, .40), 0 6px 16px -6px rgba(0, 0, 0, .60);
  --shadow-lg: 0 12px 32px -8px rgba(0, 0, 0, .70);
}

/* ============================================================
   CHHAPAI — theme se koi taalluq nahi
   Parchi hamesha safed kaghaz, kala text. Thermal printer safed kaghaz par
   chhapta hai; dark theme chhapega to poora kaghaz kala aur siyahi barbad.
   ============================================================ */
@media print {
  :root, :root[data-theme="dark"], :root[data-theme="light"] {
    --bg:         #ffffff;
    --bg-tint:    #ffffff;
    --surface:    #ffffff;
    --surface-2:  #ffffff;
    --surface-3:  #ffffff;
    --text:       #000000;
    --text-muted: #000000;
    --text-faint: #333333;
    --border:     #000000;
    --shadow-sm:  none;
    --shadow:     none;
    --shadow-lg:  none;
    --glow:       none;
    --glass:      #ffffff;
    --glass-line: #000000;
    --blur:       none;
  }
}
