/* ==========================================================================
   Design tokens - te perbashketa per faqen publike PHP dhe aplikacionet React
   ========================================================================== */

:root {
  /* ---------- ngjyrat bazë (light) ---------- */
  --bg:            #ffffff;
  --bg-subtle:     #f7f8fa;
  --bg-muted:      #eef0f4;
  --bg-inset:      #f2f4f7;
  --surface:       #ffffff;
  --surface-hover: #f7f8fa;
  --overlay:       rgba(16, 20, 28, 0.55);

  --border:        #e3e6ec;
  --border-strong: #cdd2dc;
  --border-focus:  #1f6feb;

  --text:          #131720;
  --text-muted:    #5b6472;
  --text-subtle:   #858e9c;
  --text-inverse:  #ffffff;

  /* ---------- theksi ---------- */
  --accent:        #1f6feb;
  --accent-hover:  #1a5fd0;
  --accent-active: #164fb0;
  --accent-soft:   #e8f0fe;
  --accent-border: #b9d2fb;
  --accent-text:   #0b4bb8;

  /* ---------- statuset ---------- */
  --success:       #147d4a;
  --success-soft:  #e4f5ec;
  --warning:       #a76a08;
  --warning-soft:  #fdf1dd;
  --danger:        #c0342c;
  --danger-soft:   #fdeceb;
  --info:          #1f6feb;
  --info-soft:     #e8f0fe;
  --violet:        #6d43c4;
  --violet-soft:   #efe9fb;

  /* ---------- tipografia ---------- */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --fs-xs:   0.75rem;
  --fs-sm:   0.8125rem;
  --fs-base: 0.9375rem;
  --fs-md:   1rem;
  --fs-lg:   1.125rem;
  --fs-xl:   1.375rem;
  --fs-2xl:  1.75rem;
  --fs-3xl:  2.25rem;
  --fs-4xl:  3rem;

  --lh-tight:  1.2;
  --lh-snug:   1.35;
  --lh-normal: 1.55;
  --lh-loose:  1.7;

  --fw-normal:   400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* ---------- hapesira ---------- */
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  1.25rem;
  --sp-6:  1.5rem;
  --sp-8:  2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-20: 5rem;

  /* ---------- forma ---------- */
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius:      10px;
  --radius-md:   14px;
  --radius-lg:   18px;
  --radius-xl:   24px;
  --radius-full: 999px;

  --shadow-xs: 0 1px 2px rgba(16, 20, 28, 0.05);
  --shadow-sm: 0 1px 3px rgba(16, 20, 28, 0.07), 0 1px 2px rgba(16, 20, 28, 0.04);
  --shadow:    0 4px 12px rgba(16, 20, 28, 0.08), 0 1px 3px rgba(16, 20, 28, 0.04);
  --shadow-md: 0 10px 24px rgba(16, 20, 28, 0.10), 0 2px 6px rgba(16, 20, 28, 0.05);
  --shadow-lg: 0 20px 48px rgba(16, 20, 28, 0.14), 0 4px 12px rgba(16, 20, 28, 0.06);

  /* ---------- layout ---------- */
  --container:    1280px;
  --container-sm: 900px;
  --header-h:     68px;

  /* ---------- animacionet ---------- */
  --ease:      cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:  120ms;
  --dur:       200ms;
  --dur-slow:  320ms;

  --z-dropdown: 100;
  --z-sticky:   200;
  --z-header:   300;
  --z-drawer:   400;
  --z-modal:    500;
  --z-toast:    600;

  color-scheme: light;
}

/* ---------- dark mode: zgjedhje e shprehur ---------- */
:root[data-theme="dark"] {
  --bg:            #0e1117;
  --bg-subtle:     #141922;
  --bg-muted:      #1b212c;
  --bg-inset:      #10151d;
  --surface:       #161b24;
  --surface-hover: #1c222d;
  --overlay:       rgba(4, 6, 10, 0.68);

  --border:        #262d3a;
  --border-strong: #363f4f;
  --border-focus:  #4d94ff;

  --text:          #e8ecf2;
  --text-muted:    #9aa4b4;
  --text-subtle:   #6f7a8b;
  --text-inverse:  #0e1117;

  --accent:        #4d94ff;
  --accent-hover:  #6aa6ff;
  --accent-active: #86b8ff;
  --accent-soft:   #16243a;
  --accent-border: #24405f;
  --accent-text:   #9ac2ff;

  --success:       #4ec38a;
  --success-soft:  #12261d;
  --warning:       #e0a558;
  --warning-soft:  #2a2013;
  --danger:        #f0736a;
  --danger-soft:   #2b1614;
  --info:          #4d94ff;
  --info-soft:     #16243a;
  --violet:        #a68bf0;
  --violet-soft:   #201a33;

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.45);
  --shadow:    0 4px 14px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 10px 26px rgba(0, 0, 0, 0.55);
  --shadow-lg: 0 22px 52px rgba(0, 0, 0, 0.6);

  color-scheme: dark;
}

/* ---------- dark mode: sipas sistemit ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:            #0e1117;
    --bg-subtle:     #141922;
    --bg-muted:      #1b212c;
    --bg-inset:      #10151d;
    --surface:       #161b24;
    --surface-hover: #1c222d;
    --overlay:       rgba(4, 6, 10, 0.68);

    --border:        #262d3a;
    --border-strong: #363f4f;
    --border-focus:  #4d94ff;

    --text:          #e8ecf2;
    --text-muted:    #9aa4b4;
    --text-subtle:   #6f7a8b;
    --text-inverse:  #0e1117;

    --accent:        #4d94ff;
    --accent-hover:  #6aa6ff;
    --accent-active: #86b8ff;
    --accent-soft:   #16243a;
    --accent-border: #24405f;
    --accent-text:   #9ac2ff;

    --success:       #4ec38a;
    --success-soft:  #12261d;
    --warning:       #e0a558;
    --warning-soft:  #2a2013;
    --danger:        #f0736a;
    --danger-soft:   #2b1614;
    --info:          #4d94ff;
    --info-soft:     #16243a;
    --violet:        #a68bf0;
    --violet-soft:   #201a33;

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.45);
    --shadow:    0 4px 14px rgba(0, 0, 0, 0.5);
    --shadow-md: 0 10px 26px rgba(0, 0, 0, 0.55);
    --shadow-lg: 0 22px 52px rgba(0, 0, 0, 0.6);

    color-scheme: dark;
  }
}