/* ================================================================
   AIMARTVA — DESIGN TOKENS
   ----------------------------------------------------------------
   ⚠️ ჩაირთვება style.css-ის შემდეგ. ეს განზრახაა:
   style.css:21-ის `:root` legacy ალიასებს განსაზღვრავს
   (--accent / --bg / --text / --border / --radius / --shadow-*),
   რომლებსაც მთელი კოდი იყენებს. აქ იმავე ალიასებს ვწერთ ხელახლა →
   პროექტი მთლიანად იღებს ახალ პალიტრას ყოველი ფაილის შეხების გარეშე.

   პრინციპები: მონოქრომი + ერთი აქცენტი · 1px ბორდერი ჩრდილის ნაცვლად ·
   მკვეთრი რადიუსი (4-10px) · 8px ბადე · ემოჯი და ნეონი — არა.

   შექმნილი: 2026-07-31
================================================================ */

:root{

/* ── 2026-08-06: ნატიური კონტროლების სქემა ──────────────────────
   ⚠️ `color-scheme` არსად არ ეწერა. ამის გამო `<select>`-ის ჩამოშლილ
   სიას, სქროლბარებს და ფორმის სხვა ნატიურ ელემენტებს ბრაუზერი
   **ყოველთვის ღიად** ხატავდა — დახურული სელექტორი მუქი იყო (CSS),
   გახსნილი სია კი თეთრი. სიას გვერდის CSS ვერ წვდება, ამიტომ
   ერთადერთი სწორი ბერკეტი სწორედ ეს თვისებაა. ── */
    color-scheme: light;

/* ── ნეიტრალები (ცივი ნაცრისფერი კიბე) ─────────────────────── */
    --n-0:    #FFFFFF;
    --n-25:   #FCFCFD;
    --n-50:   #F9FAFB;
    --n-100:  #F2F4F7;
    --n-150:  #EAECF0;
    --n-200:  #E5E7EB;
    --n-300:  #D2D6DB;
    --n-400:  #9DA4AE;
    --n-500:  #6C737F;
    --n-600:  #4D5561;
    --n-700:  #384250;
    --n-800:  #1F2A37;
    --n-900:  #111927;
    --n-950:  #0B0F19;

/* ── აქცენტი: ინდიგო #6366F1 (გ. ყურუა, 2026-08-06) ──────────
   ⚠️ ბრენდის ფერის ერთადერთი წყარო. 2026-08-01-იდან კობალტი იყო (#0B4FD1),
   ახლა ინდიგოზე დაბრუნდა. მთელი საიტი `var(--ac-*)`-ს კითხულობს,
   ამიტომ შეცვლა მხოლოდ აქაა საჭირო.
   ⚠️ მუქ თემაზე ეს რიგი ქვემოთ მონოქრომად გადაიწერება (Carbon) — განზრახ. */
    --ac-50:  #EEF2FF;
    --ac-100: #E0E7FF;
    --ac-200: #C7D2FE;
    --ac-300: #A5B4FC;
    --ac-400: #818CF8;
    --ac-500: #7C7FF3;
    --ac-600: #6366F1;   /* ძირითადი */
    --ac-700: #4F46E5;
    --ac-800: #4338CA;
    --ac-900: #3730A3;

/* ── სემანტიკა (გამოცდის „სწორი/არასწორი" ლოგიკისთვის) ──────── */
    --ok-50:   #ECFDF3;   --ok-600:   #067647;   --ok-700:   #05603A;
    --warn-50: #FFFAEB;   --warn-600: #B54708;   --warn-700: #93370D;
    --err-50:  #FEF3F2;   --err-600:  #B42318;   --err-700:  #912018;

/* ── ტიპოგრაფიკა ────────────────────────────────────────────
   Inter-ს ქართული გლიფები არ აქვს → ლათინური/ციფრები Inter-ით,
   ქართული Noto Sans Georgian-ით. თანმიმდევრობა კრიტიკულია. */
    --font-sans: 'Inter', 'Noto Sans Georgian', -apple-system,
                 BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono: 'SF Mono', 'JetBrains Mono', ui-monospace, monospace;

/* ── ფლუიდური ტიპოგრაფიკა (2026-08-06) ──────────────────────
   ზომები ეკრანის სიგანეს მიჰყვება clamp()-ით — breakpoint-ზე ნახტომების
   გარეშე. საკონტროლო წერტილი: **1280px = ძველი ფიქსირებული მნიშვნელობა**,
   ე.ი. ლეპტოპზე იერსახე უცვლელია; ვიწროზე ოდნავ პატარავდება,
   დიდ მონიტორზე იზრდება. მთელი პროექტი ამ ტოკენებს კითხულობს,
   ამიტომ ცვლილება ერთ ადგილას მთელ საიტზე მოქმედებს. */
/* 2026-08-04 — დიდი მონიტორის მასშტაბი.
   ძველი ჭერი (მაგ. --t-md max 16px) 1600px-ზე უკვე ამოიწურებოდა და 2K-ზე
   ინტერფეისი პატარა რჩებოდა. ახლა ზრდა 2560px-მდე გრძელდება.
   ⚠️ ფორმულა ისეა შერჩეული, რომ **1280px-ზე მნიშვნელობა ზუსტად ძველია**
   (a + b·12.8 = ძველი), ე.ი. ლეპტოპზე იერსახე არ შეცვლილა;
   2560px-ზე კი ჭერს აღწევს. */
    --t-xs:   clamp(10.5px, calc(8px  + 0.234vw), 14px);   /* 11 @1280 → 14 @2560 */
    --t-sm:   clamp(11.5px, calc(9px  + 0.234vw), 15px);   /* 12 → 15 */
    --t-base: clamp(12.5px, calc(10px + 0.234vw), 16px);   /* 13 → 16 */
    --t-md:   clamp(13px,   calc(10px + 0.3125vw), 18px);  /* 14 → 18 */
    --t-lg:   clamp(15px,   calc(11px + 0.39vw),  21px);   /* 16 → 21 */
    --t-xl:   clamp(18px,   calc(12px + 0.625vw), 28px);   /* 20 → 28 */
    --t-2xl:  clamp(21px,   calc(14px + 0.78vw),  34px);   /* 24 → 34 */
    --t-3xl:  clamp(25px,   calc(16px + 1.09vw),  44px);   /* 30 → 44 */

    --lh-xs:   1.45;  --lh-sm:  1.5;   --lh-base: 1.54;
    --lh-md:   1.45;  --lh-lg:  1.5;   --lh-xl:   1.4;
    --lh-2xl:  1.33;  --lh-3xl: 1.27;

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

    --track-tight: -0.014em;   /* დიდ ზომებზე */
    --track-wide:   0.04em;    /* uppercase წარწერებზე */

/* ── 8px ბადე ──────────────────────────────────────────────── */
    --s-1: 4px;    --s-2: 8px;    --s-3: 12px;   --s-4: 16px;
    --s-5: 24px;   --s-6: 32px;   --s-7: 40px;   --s-8: 48px;   --s-9: 64px;

/* ── რადიუსი — მკვეთრი ─────────────────────────────────────── */
    --r-xs: 4px;   --r-sm: 6px;   --r-md: 8px;   --r-lg: 10px;
    --r-full: 999px;              /* მხოლოდ ავატარი/ინდიკატორი */

/* ── ბორდერი — ჩრდილის მაგივრად მთავარი გამყოფი ────────────── */
    --bd-color:        var(--n-200);
    --bd-color-strong: var(--n-300);
    --bd:        1px solid var(--bd-color);
    --bd-strong: 1px solid var(--bd-color-strong);

/* ── ჩრდილი — მჭიდრო, სამი დონე, ბუნდოვნება არა ────────────── */
    --sh-xs: 0 1px 2px rgba(16,24,40,.04);
    --sh-sm: 0 1px 2px rgba(16,24,40,.04), 0 1px 3px rgba(16,24,40,.06);
    --sh-md: 0 2px 4px rgba(16,24,40,.04), 0 4px 8px rgba(16,24,40,.05);
    --sh-focus: 0 0 0 2px var(--n-0), 0 0 0 4px var(--ac-600);

/* ── ზედაპირები ────────────────────────────────────────────── */
    --surface:      var(--n-0);
    --surface-sunk: var(--n-50);
    --surface-hover:var(--n-100);

/* ── მოძრაობა — სწრაფი და მცირე ────────────────────────────── */
    --ease: cubic-bezier(.2,0,0,1);
    --dur-fast: 120ms;   --dur: 180ms;   --dur-slow: 240ms;


/* ════════════════════════════════════════════════════════════
   LEGACY ალიასები — style.css:21-ის გადაფარვა.
   ამ ბლოკის წყალობით ძველი კოდი ავტომატურად ახალ პალიტრაზე გადადის.
   ════════════════════════════════════════════════════════════ */
    --bg:             var(--n-50);
    --bg-secondary:   var(--n-100);
    --bg-card:        var(--n-0);
    --text:           var(--n-900);
    --text-secondary: var(--n-600);
    --text-muted:     var(--n-500);

    --accent:         var(--ac-600);
    --accent-glow:    var(--ac-50);
    --accent-green:   var(--ok-600);
    --accent-red:     var(--err-600);
    --accent-orange:  var(--warn-600);
    --accent-cyan:    var(--ac-500);
    --accent-purple:  var(--ac-600);   /* იისფერი გაუქმებულია */

    --border:        var(--n-200);
    --border-strong: var(--n-300);

    --shadow-sm: var(--sh-xs);
    --shadow-md: var(--sh-sm);
    --shadow-lg: var(--sh-md);
    --shadow-xl: var(--sh-md);

/* ── მთავარი ღილაკი — სემანტიკური ტოკენები ──────────────────
   ღია თემაზე კობალტი თეთრი ტექსტით, მუქზე — თეთრი ნახშირისფერი
   ტექსტით. კომპონენტები ფერს აღარ ითვისებენ პირდაპირ. */
    --btn-primary-bg:       var(--ac-600);
    --btn-primary-fg:       var(--n-0);
    --btn-primary-bg-hover: var(--ac-700);

    --radius:      var(--r-md);
    --radius-lg:   var(--r-lg);
    --radius-full: var(--r-full);

    --transition: var(--dur) var(--ease);
    --font-geo: var(--font-sans);
    --font-en:  var(--font-sans);
}


/* ════════════════════════════════════════════════════════════
   DARK — CARBON BLACK & WHITE (რედიზაინი 2026-08-06).
   პრემიუმ მონოქრომი: ლურჯი მუქ თემაზე სრულად ამოღებულია.
   აქცენტი = თეთრი. ღილაკები = თეთრი ფონი + ნახშირისფერი ტექსტი.

   ⚠️ არქიტექტურა: `--ac-*` რიგი აქ მთლიანად გადაიწერება ნაცრისფრად —
   ამიტომ ყველა კომპონენტი, რომელიც `var(--ac-600)`/`var(--accent)`-ს
   იყენებს, ავტომატურად მონოქრომი ხდება ფაილების შეხების გარეშე.
   `--n-*` განზრახ არ იცვლება: მას მუქ თემაზე შებრუნებულად იყენებენ
   (მაგ. `.sb-avatar{background:var(--n-100);color:var(--n-900)}`).
   ════════════════════════════════════════════════════════════ */
[data-theme="dark"]{
/* ნატიური კონტროლები მუქ სქემაზე — იხ. კომენტარი `:root`-ში.
   სპეციფიკურობა `:root`-ის ტოლია, მაგრამ ეს ბლოკი ქვემოთაა → იმარჯვებს. */
    color-scheme: dark;

/* ── zinc კიბე ─────────────────────────────────────────────── */
    --z-950: #09090B;   --z-900: #18181B;   --z-800: #27272A;
    --z-700: #3F3F46;   --z-400: #A1A1AA;   --z-300: #D4D4D8;
    --z-200: #E4E4E7;   --z-100: #F4F4F5;   --z-0:   #FFFFFF;

/* ── აქცენტის რიგი → მონოქრომი (ლურჯი აღარაა) ──────────────── */
    --ac-50:  #1C1C1F;   --ac-100: #27272A;   --ac-200: #3F3F46;
    --ac-300: #A1A1AA;   --ac-400: #FFFFFF;   --ac-500: #F4F4F5;
    --ac-600: #FFFFFF;   --ac-700: #E4E4E7;   --ac-800: #D4D4D8;
    --ac-900: #FFFFFF;

    --bd-color:        var(--z-800);
    --bd-color-strong: var(--z-700);

    --surface:       var(--z-900);
    --surface-sunk:  var(--z-950);
    --surface-hover: var(--z-800);

    --sh-xs: 0 1px 2px rgba(0,0,0,.32);
    --sh-sm: 0 1px 3px rgba(0,0,0,.36);
    --sh-md: 0 4px 8px rgba(0,0,0,.40);
    --sh-focus: 0 0 0 2px var(--z-950), 0 0 0 4px var(--z-0);

    --bg:             var(--z-950);
    --bg-secondary:   var(--z-900);
    --bg-card:        var(--z-900);
    --text:           var(--z-100);
    --text-secondary: var(--z-300);
    --text-muted:     var(--z-400);

    --accent:      var(--z-0);
    --accent-glow: rgba(255,255,255,.08);
    --accent-cyan:   var(--z-100);
    --accent-purple: var(--z-0);

    --border:        var(--z-800);
    --border-strong: var(--z-700);

    --btn-primary-bg:       var(--z-0);
    --btn-primary-fg:       var(--z-950);
    --btn-primary-bg-hover: var(--z-200);
}

/* ── მუქი თემა: მთავარი ღილაკების ტექსტი ────────────────────
   ისტორიულად ბევრს `color:#fff` აქვს ჩაწერილი — თეთრ ფონზე
   უხილავი გახდებოდა. სელექტორს `[data-theme]` პრეფიქსი ამატებს
   სპეციფიკურობას, ამიტომ გვერდის შიდა <style>-საც გადაფარავს. */
[data-theme="dark"] .plan-btn.primary,
[data-theme="dark"] .plan-btn.free-start,
[data-theme="dark"] .pfl-btn,
[data-theme="dark"] .btn-header,
[data-theme="dark"] .btn-primary,
[data-theme="dark"] .sb-cd-btn{
    background: var(--btn-primary-bg);
    border-color: var(--btn-primary-bg);
    color: var(--btn-primary-fg);
}
[data-theme="dark"] .plan-btn.primary:hover,
[data-theme="dark"] .plan-btn.free-start:hover,
[data-theme="dark"] .pfl-btn:hover,
[data-theme="dark"] .btn-header:hover,
[data-theme="dark"] .btn-primary:hover,
[data-theme="dark"] .sb-cd-btn:hover{
    background: var(--btn-primary-bg-hover);
    border-color: var(--btn-primary-bg-hover);
    color: var(--btn-primary-fg);
    filter: none;
}


/* ── ბაზისი ────────────────────────────────────────────────── */
html{ -webkit-text-size-adjust: 100%; }

body{
    font-family: var(--font-sans);
    font-size: var(--t-md);
    line-height: var(--lh-md);
    color: var(--text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: 'cv11' 1, 'ss01' 1;   /* Inter — გამართული a/g */
}

h1,h2,h3,h4{ letter-spacing: var(--track-tight); font-weight: var(--fw-semi); }

/* ფოკუსი — ხილული, მაგრამ ნეონის გარეშე.
   ⚠️ 2026-08-06 — ორი ცვლილება, ორივე რეალური ბაგის გამო:
   1. `:where(...)` ამოღებულია. მისი სპეციფიკურობა **ნულია**, ამიტომ
      კლასის ნებისმიერი წესი (`.sb-item`, `.nav-link`…) ჯაბნიდა და
      Tab-ის ფოკუსი ბევრგან საერთოდ არ ჩანდა.
   2. `box-shadow`-ის ორმაგი რგოლის ნაცვლად — ჩვეულებრივი `outline`.
      რგოლის შიდა ფენა თეთრი იყო (`--n-0`) და ღია ფონზე ქრებოდა,
      გარეთა კი მხოლოდ 2px — გიორგიმ სრულიად სამართლიანად ვერ დაინახა.
      `outline` ფონზე არ არის დამოკიდებული და ელემენტს არ სჭირდება
      `position`/`z-index` მასთან. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible{
    outline: 3px solid var(--ac-600);
    outline-offset: 2px;
    border-radius: var(--r-sm);
}

::selection{ background: var(--ac-100); color: var(--ac-900); }

/* ანიმაციის შემცირების პატივისცემა */
@media (prefers-reduced-motion: reduce){
    *,*::before,*::after{
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}