/* ==========================================================================
   SovranPOS — Design tokens
   Ngjyrat janë marrë nga tema e vërtetë e produktit:
   frontend/src/styles/themes/antdTheme.ts
   ========================================================================== */

:root {
  /* BARDHË + GOLD. Asnjë blu — gri-të janë të ngrohtë, jo të ftohtë,
     që të rrinë mirë pranë arit. */
  --bg:          #ffffff;
  --bg-alt:      #faf9f6;
  --bg-sunken:   #f3f1ec;
  --bg-tint:     #fbf7ee;

  --text:        #1a1a1a;
  --text-soft:   #4a4741;
  --text-muted:  #6f6a61;
  --text-faint:  #9c968b;

  --line:        #e9e5dd;
  --line-soft:   #f2efe9;
  --line-strong: #d8d2c6;

  /* Ari — ngjyra e sistemit, marrë nga logoja (sovranlogo.png) */
  --gold:        #c2a05e;
  --gold-deep:   #9c7c3c;
  --gold-dark:   #7a5f2a;
  --gold-soft:   #faf6ec;
  --gold-line:   #e9dec4;

  /* Errëta — për kokat dhe tekstin kryesor */
  --ink:         #14181f;
  --ink-deep:    #0b0e14;

  /* Gjendjet */
  --success:     #10b981;
  --success-soft:#ecfdf5;
  --warning:     #f59e0b;
  --danger:      #ef4444;
  --info:        #06b6d4;

  /* Tipografia */
  --font-display: "Inter Tight", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono:    ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;

  /* Shkalla është e flatpay-t, e nxjerrë nga CSS-ja e tyre (jo e shpikur):
     h1 5rem · h2 4rem · h3 2.5rem · h4 2rem · h5 1.25rem
     tekst i madh 1.25rem · tekst 1rem · tekst i vogël .8rem
     Lartësia e rreshtit atje: 1.1 për titujt, 1.5 për tekstin. */
  --fs-hero:   clamp(2.9rem, 4.8vw, 5rem);
  --fs-h2:     clamp(2.15rem, 3.9vw, 4rem);
  --fs-h3:     clamp(1.6rem, 2.6vw, 2.5rem);
  --fs-h4:     clamp(1.35rem, 1.9vw, 2rem);
  --fs-lead:   clamp(1.05rem, 1.5vw, 1.25rem);
  --fs-body:   1rem;
  --fs-small:  0.875rem;
  --fs-micro:  0.8rem;

  /* Ritmi — seksion 7rem, i gjerë 10rem, i ngushtë 3.5rem (flatpay)
     Kontejneri: 100rem me 2rem anash = 96rem brenda (1536px). */
  --gap:        clamp(1rem, 2vw, 1.5rem);
  --section-y:  clamp(4.5rem, 8vw, 7rem);
  --shell:      1600px;
  --radius:     12px;
  --radius-sm:  8px;
  --radius-lg:  16px;

  /* Hije */
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.05);
  --shadow:    0 1px 3px rgba(16, 24, 40, 0.08), 0 1px 2px rgba(16, 24, 40, 0.04);
  --shadow-md: 0 4px 12px rgba(16, 24, 40, 0.07), 0 2px 4px rgba(16, 24, 40, 0.04);
  --shadow-lg: 0 12px 32px rgba(16, 24, 40, 0.1), 0 4px 8px rgba(16, 24, 40, 0.04);

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  /* Koka — ndryshon me mënyrën */
  --header-bg:     rgba(255, 255, 255, 0.88);
  --header-border: var(--line);
  --header-brand:  var(--ink);
  --header-pos:    var(--gold-deep);
  --nav-link:      var(--text-soft);
  --nav-hover-bg:  var(--gold-soft);
  --nav-active:    var(--gold-deep);
  --toggle-border: var(--line-strong);
  --toggle-color:  var(--text-soft);
  --toggle-bg:     var(--bg);
}

/* ══ Mënyra e errët ═════════════════════════════════════════════════════════
   E njëjta gjuhë vizuale, vetëm token-at ndryshojnë.
   ════════════════════════════════════════════════════════════════════════ */

html.dark-mode body {
  /* ZI + GOLD — e zezë e vërtetë, si vetë sistemi (#0a0a0a / #141414). */
  --bg:          #0a0a0a;
  --bg-alt:      #111111;
  --bg-sunken:   #1a1a1a;
  --bg-tint:     #151515;

  --text:        #f5f5f4;
  --text-soft:   #cfcac2;
  --text-muted:  #a3a099;
  --text-faint:  #767471;

  --line:        #242424;
  --line-soft:   #1c1c1c;
  --line-strong: #333333;

  /* Ari ndriçohet pak që të lexohet mbi të errëtën */
  --gold:        #c2a05e;
  --gold-deep:   #d9bc7d;
  --gold-soft:   rgba(194, 160, 94, 0.12);
  --gold-line:   #3a3527;

  --success-soft:#0f2a22;

  --header-bg:     rgba(20, 24, 31, 0.92);
  --header-border: rgba(255, 255, 255, 0.08);
  --header-brand:  #ffffff;
  --header-pos:    #E3C98A;
  --nav-link:      #a9b2c0;
  --nav-hover-bg:  rgba(255, 255, 255, 0.07);
  --nav-active:    #E3C98A;
  --toggle-border: rgba(255, 255, 255, 0.16);
  --toggle-color:  #c6cdd8;
  --toggle-bg:     rgba(255, 255, 255, 0.05);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow:    0 1px 3px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.55);
}