/* ============================================================================
   THEMELI — sistemi i dizajnit të QTA-së · Tokenët
   ----------------------------------------------------------------------------
   Themeli = baza mbi të cilën ndërtohet çdo faqe. Sfond i ngrohtë (betoni,
   letra), theks "tulle" për veprimin kryesor dhe blu QTA për lidhjet, besimin
   dhe verifikimin. Ngjyrat e statusit përdoren vetëm për kuptim.

   Rregulli: komponentët konsumojnë VETËM tokenët semantikë (seksioni 2), kurrë
   paletën bazë (seksioni 1) apo vlera hex të shkruara me dorë.

   Të gjitha çiftet tekst/sfond janë verifikuar për WCAG 2.2 AA (≥ 4.5:1).
   ========================================================================= */

:root {
  color-scheme: light;

  /* ----------------------------------------------------- 1. Paleta bazë */
  --stone-0:   #ffffff;
  --stone-25:  #fbfaf7;
  --stone-50:  #f6f5f1;
  --stone-100: #efede7;
  --stone-150: #e8e5dd;
  --stone-200: #e0dcd3;
  --stone-300: #cfc9bd;
  --stone-400: #8f897c;
  --stone-500: #6e695f;
  --stone-600: #5c584f;
  --stone-700: #3f3c36;
  --stone-800: #2a2925;
  --stone-900: #1f1e1b;
  --stone-950: #171614;

  --brick-50:  #fbefea;
  --brick-100: #f5dcd2;
  --brick-200: #ebc3b3;
  --brick-600: #a4472a;
  --brick-700: #8e3b20;
  --brick-text: #9a4326;

  --blue-50:  #e7f0fa;
  --blue-100: #cfe1f4;
  --blue-600: #0b57a0;
  --blue-700: #084a89;

  --green-50:  #e6f4ec;
  --green-200: #b9dfc8;
  --green-700: #1e6b45;

  --amber-50:  #fff3d9;
  --amber-200: #f3d493;
  --amber-700: #8a5300;

  --red-50:  #fdecea;
  --red-200: #f6c1bb;
  --red-700: #b42318;
  --red-800: #971c12;

  /* --------------------------------------------- 2. Tokenët semantikë */
  /* Sipërfaqet */
  --canvas:           var(--stone-50);   /* sfondi i aplikacionit */
  --surface:          var(--stone-0);    /* karta, tabela, fusha, dialogë */
  --surface-sunken:   var(--stone-100);  /* menuja anësore, koka e tabelës */
  --surface-hover:    var(--stone-150);  /* hover neutral, rresht i zgjedhur */
  --surface-inverse:  var(--stone-900);
  --dialog-backdrop:  var(--stone-950);

  /* Vijat */
  --border:           var(--stone-200);
  --border-control:   var(--stone-300);  /* butona dytësorë, çipa */
  --border-strong:    var(--stone-400);  /* kufiri i fushave: ≥ 3:1 */

  /* Teksti */
  --text:             var(--stone-900);  /* 15.3:1 mbi canvas */
  --text-muted:       var(--stone-600);  /*  6.5:1 */
  --text-subtle:      var(--stone-500);  /*  5.0:1 — jo mbi surface-hover */
  --text-inverse:     var(--stone-0);

  /* Veprimi kryesor (tulla) */
  --action:           var(--brick-600);  /* e bardha mbi të: 6.0:1 */
  --action-hover:     var(--brick-700);
  --action-text:      var(--stone-0);
  --accent-text:      var(--brick-text); /* zgjedhje, tregues, theks */
  --accent-soft:      var(--brick-50);
  --accent-border:    var(--brick-200);

  /* Lidhjet, besimi, verifikimi (blu QTA) */
  --link:             var(--blue-600);   /* 6.7:1 */
  --link-hover:       var(--blue-700);
  --info:             var(--blue-600);
  --info-soft:        var(--blue-50);
  --info-border:      var(--blue-100);

  /* Statuset — vetëm për kuptim, gjithnjë me fjalë + ikonë */
  --success:          var(--green-700);
  --success-text:     var(--stone-0);
  --success-soft:     var(--green-50);
  --success-border:   var(--green-200);
  --warning:          var(--amber-700);
  --warning-soft:     var(--amber-50);
  --warning-border:   var(--amber-200);
  --danger:           var(--red-700);
  --danger-hover:     var(--red-800);
  --danger-text:      var(--stone-0);
  --danger-soft:      var(--red-50);
  --danger-border:    var(--red-200);

  --focus:            var(--blue-600);
  --focus-ring:       0 0 0 3px rgba(11, 87, 160, .28);
  --highlight:        #fff1b8;
  --overlay:          rgba(23, 22, 20, .46);

  /* ------------------------------------------------- 3. Tipografia */
  /* Atkinson Hyperlegible: çdo shkronjë dallohet (I/l/1, O/0) — thelbësore
     për numrat personalë, NIPT-in dhe AMZË-në. Serifja vetëm për tituj. */
  --font-sans:    "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono:    "Atkinson Hyperlegible Mono", ui-monospace, "Cascadia Mono", "Segoe UI Mono", Menlo, Consolas, monospace;
  --font-display: "Source Serif 4", "Iowan Old Style", "Palatino Linotype", Georgia, serif;

  --fs-2xs:  .75rem;    /* 12 */
  --fs-xs:   .8125rem;  /* 13 */
  --fs-sm:   .875rem;   /* 14 */
  --fs-md:   .9375rem;  /* 15 — baza e aplikacionit */
  --fs-base: 1rem;      /* 16 — baza e faqeve publike */
  --fs-lg:   1.125rem;  /* 18 */
  --fs-xl:   1.375rem;  /* 22 */
  --fs-2xl:  1.75rem;   /* 28 */
  --fs-3xl:  2.25rem;   /* 36 */
  --fs-4xl:  3rem;      /* 48 */

  --lh-tight: 1.15;
  --lh-snug:  1.35;
  --lh-base:  1.55;

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

  /* ------------------------------------------------ 4. Hapësira (4px) */
  --sp-1:  .25rem;
  --sp-2:  .5rem;
  --sp-3:  .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;

  /* --------------------------------------------------- 5. Format */
  --r-xs:   4px;
  --r-sm:   6px;    /* çipa, elemente të vogla */
  --r-md:   8px;    /* butona, fusha */
  --r-lg:   12px;   /* karta, menu */
  --r-xl:   16px;   /* dialogë, panele të mëdha */
  --r-full: 999px;  /* avatarë, statuse */

  --control-h:    2.5rem;   /* 40px */
  --control-h-sm: 2rem;     /* 32px */
  --control-h-lg: 3rem;     /* 48px */
  --touch-min:    2.75rem;  /* 44px */

  /* ------------------------------------------------- 6. Thellësia */
  --shadow-xs: 0 1px 2px rgba(31, 30, 27, .06);
  --shadow-sm: 0 1px 3px rgba(31, 30, 27, .08), 0 1px 2px rgba(31, 30, 27, .04);
  --shadow-md: 0 10px 28px rgba(31, 30, 27, .11), 0 2px 6px rgba(31, 30, 27, .05);
  --shadow-lg: 0 24px 56px rgba(31, 30, 27, .18), 0 6px 14px rgba(31, 30, 27, .07);

  /* -------------------------------------------------- 7. Lëvizja */
  --ease:   cubic-bezier(.2, .7, .2, 1);
  --dur-1:  120ms;
  --dur-2:  180ms;
  --dur-3:  240ms;

  /* -------------------------------------------------- 8. Struktura */
  --sidebar-w:      248px;
  --sidebar-w-rail: 72px;
  --topbar-h:       56px;
  --masthead-h:     64px;
  --content-max:    1280px;
  --content-wide:   1720px;
  --dialog-document-w: 32rem;
  --prose-max:      72ch;

  --z-sticky:   1020;
  --z-shell:    1030;
  --z-backdrop: 1040;
  --z-drawer:   1045;
  --z-palette:  1080;
  --z-toast:    1090;

  /* ------------------------------------ 9. Bootstrap si infrastrukturë */
  /* Bootstrap mbetet vetëm për grid, utilitete dhe sjellje (modal, dropdown,
     collapse, offcanvas, toast). Pamja e tij vjen nga Themeli. */
  --bs-font-sans-serif:     var(--font-sans);
  --bs-font-monospace:      var(--font-mono);
  --bs-body-font-family:    var(--font-sans);
  --bs-body-font-size:      var(--fs-md);
  --bs-body-font-weight:    var(--fw-regular);
  --bs-body-line-height:    var(--lh-base);
  --bs-body-color:          var(--text);
  --bs-body-color-rgb:      31, 30, 27;
  --bs-body-bg:             var(--surface);
  --bs-body-bg-rgb:         255, 255, 255;
  --bs-emphasis-color:      var(--text);
  --bs-emphasis-color-rgb:  31, 30, 27;
  --bs-secondary-color:     var(--text-muted);
  --bs-secondary-color-rgb: 92, 88, 79;
  --bs-secondary-bg:        var(--surface-sunken);
  --bs-secondary-bg-rgb:    239, 237, 231;
  --bs-tertiary-color:      var(--text-subtle);
  --bs-tertiary-color-rgb:  110, 105, 95;
  --bs-tertiary-bg:         var(--canvas);
  --bs-tertiary-bg-rgb:     246, 245, 241;
  --bs-heading-color:       var(--text);
  --bs-link-color:          var(--link);
  --bs-link-color-rgb:      11, 87, 160;
  --bs-link-hover-color:    var(--link-hover);
  --bs-link-hover-color-rgb: 8, 74, 137;
  --bs-link-decoration:     underline;
  --bs-code-color:          var(--accent-text);
  --bs-highlight-color:     var(--text);
  --bs-highlight-bg:        var(--highlight);
  --bs-border-width:        1px;
  --bs-border-color:        var(--border);
  --bs-border-color-translucent: rgba(31, 30, 27, .12);
  --bs-border-radius:       var(--r-md);
  --bs-border-radius-sm:    var(--r-sm);
  --bs-border-radius-lg:    var(--r-lg);
  --bs-border-radius-xl:    var(--r-xl);
  --bs-border-radius-xxl:   20px;
  --bs-border-radius-2xl:   20px;
  --bs-border-radius-pill:  var(--r-full);
  --bs-box-shadow:          var(--shadow-md);
  --bs-box-shadow-sm:       var(--shadow-sm);
  --bs-box-shadow-lg:       var(--shadow-lg);
  --bs-box-shadow-inset:    inset 0 1px 2px rgba(31, 30, 27, .06);
  --bs-focus-ring-width:    3px;
  --bs-focus-ring-opacity:  .28;
  --bs-focus-ring-color:    rgba(11, 87, 160, .28);
  --bs-form-valid-color:    var(--success);
  --bs-form-valid-border-color: var(--success);
  --bs-form-invalid-color:  var(--danger);
  --bs-form-invalid-border-color: var(--danger);

  --bs-primary:                 var(--action);
  --bs-primary-rgb:             164, 71, 42;
  --bs-primary-text-emphasis:   var(--accent-text);
  --bs-primary-bg-subtle:       var(--accent-soft);
  --bs-primary-border-subtle:   var(--accent-border);
  --bs-secondary:               var(--text-muted);
  --bs-secondary-rgb:           92, 88, 79;
  --bs-secondary-text-emphasis: var(--text);
  --bs-secondary-bg-subtle:     var(--surface-sunken);
  --bs-secondary-border-subtle: var(--border);
  --bs-success:                 var(--success);
  --bs-success-rgb:             30, 107, 69;
  --bs-success-text-emphasis:   var(--success);
  --bs-success-bg-subtle:       var(--success-soft);
  --bs-success-border-subtle:   var(--success-border);
  --bs-info:                    var(--info);
  --bs-info-rgb:                11, 87, 160;
  --bs-info-text-emphasis:      var(--info);
  --bs-info-bg-subtle:          var(--info-soft);
  --bs-info-border-subtle:      var(--info-border);
  --bs-warning:                 var(--warning);
  --bs-warning-rgb:             138, 83, 0;
  --bs-warning-text-emphasis:   var(--warning);
  --bs-warning-bg-subtle:       var(--warning-soft);
  --bs-warning-border-subtle:   var(--warning-border);
  --bs-danger:                  var(--danger);
  --bs-danger-rgb:              180, 35, 24;
  --bs-danger-text-emphasis:    var(--danger);
  --bs-danger-bg-subtle:        var(--danger-soft);
  --bs-danger-border-subtle:    var(--danger-border);
  --bs-light:                   var(--surface-sunken);
  --bs-light-rgb:               239, 237, 231;
  --bs-light-text-emphasis:     var(--text);
  --bs-light-bg-subtle:         var(--canvas);
  --bs-light-border-subtle:     var(--border);
  --bs-dark:                    var(--stone-900);
  --bs-dark-rgb:                31, 30, 27;
  --bs-dark-text-emphasis:      var(--text);
  --bs-dark-bg-subtle:          var(--surface-sunken);
  --bs-dark-border-subtle:      var(--border-strong);
}

/* ============================================================================
   Tema e errët — vlera të veta, jo inversion. Çiftet janë verifikuar AA.
   Aplikohet nga skripti i temës (data-theme) para vizatimit të parë.
   ========================================================================= */
:root[data-theme="dark"] {
  color-scheme: dark;

  --canvas:          #171614;
  --surface:         #1f1e1b;
  --surface-sunken:  #1b1a17;
  --surface-hover:   #2a2925;
  --surface-inverse: #f2efe9;

  --border:          #34322d;
  --border-control:  #4a4740;
  --border-strong:   #6f6a60;

  --text:            #f2efe9;
  --text-muted:      #b8b2a6;
  --text-subtle:     #a39d91;
  --text-inverse:    #171614;

  --action:          #e08a6a;
  --action-hover:    #ea9c7e;
  --action-text:     #1a1917;
  --accent-text:     #efa07f;
  --accent-soft:     #2e211b;
  --accent-border:   #5a3526;

  --link:            #8cc2ee;
  --link-hover:      #b3d7f4;
  --info:            #8cc2ee;
  --info-soft:       #16222f;
  --info-border:     #27415c;

  --success:         #7fcb9a;
  --success-text:    #1a1917;
  --success-soft:    #15261c;
  --success-border:  #2a4a36;
  --warning:         #e6b45c;
  --warning-soft:    #2a2214;
  --warning-border:  #5a4623;
  --danger:          #f29a8e;
  --danger-hover:    #f6b3aa;
  --danger-text:     #1a1917;
  --danger-soft:     #2e1a17;
  --danger-border:   #5e2f29;

  --focus:           #8cc2ee;
  --focus-ring:      0 0 0 3px rgba(140, 194, 238, .32);
  --highlight:       #5a4a12;
  --overlay:         rgba(0, 0, 0, .62);

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, .5), 0 1px 2px rgba(0, 0, 0, .3);
  --shadow-md: 0 12px 30px rgba(0, 0, 0, .55), 0 2px 6px rgba(0, 0, 0, .35);
  --shadow-lg: 0 24px 60px rgba(0, 0, 0, .7), 0 6px 16px rgba(0, 0, 0, .4);

  --bs-body-color-rgb:       242, 239, 233;
  --bs-body-bg-rgb:          31, 30, 27;
  --bs-emphasis-color-rgb:   242, 239, 233;
  --bs-secondary-color-rgb:  184, 178, 166;
  --bs-secondary-bg-rgb:     27, 26, 23;
  --bs-tertiary-color-rgb:   163, 157, 145;
  --bs-tertiary-bg-rgb:      23, 22, 20;
  --bs-link-color-rgb:       140, 194, 238;
  --bs-link-hover-color-rgb: 179, 215, 244;
  --bs-border-color-translucent: rgba(242, 239, 233, .14);
  --bs-box-shadow-inset:     inset 0 1px 2px rgba(0, 0, 0, .4);
  --bs-focus-ring-color:     rgba(140, 194, 238, .32);

  --bs-primary-rgb:   224, 138, 106;
  --bs-secondary-rgb: 184, 178, 166;
  --bs-success-rgb:   127, 203, 154;
  --bs-info-rgb:      140, 194, 238;
  --bs-warning-rgb:   230, 180, 92;
  --bs-danger-rgb:    242, 154, 142;
  --bs-light-rgb:     27, 26, 23;
  --bs-dark:          #f2efe9;
  --bs-dark-rgb:      242, 239, 233;
}

/* Lëvizja e reduktuar: gjendjet ndryshojnë, por pa animacion. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-1: 1ms;
    --dur-2: 1ms;
    --dur-3: 1ms;
  }

  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}