/* ===================================================================== iDentistStore — توکن‌های طراحی · **تنها جای تعریف** --------------------------------------------------------------------- 🔴🔴 **این فایل تنها جایی است که رنگ، فاصله، شعاع، سایه و زمان تعریف می‌شوند.** هم سایتِ زنده و هم ماکاپ‌های `ui/` از همین یک فایل می‌خوانند: چیدمان‌ها آن را **پیش از** هر شیوه‌نامه‌ی دیگری لینک می‌کنند، و `ui/build.py` همین فایل را در ابتدای هر ماکاپ جاسازی می‌کند. `CssTokenGuardTest` نگهبانِ هر دو نیمه است. ⛔⛔ **چرا این برش لازم شد — دو درختِ CSS و یک بلوکِ تکراری.** تا امروز `:root` **سه** جا بود: `public/css/app.css`، `public/css/vendor.css` و `ui/style.css`. هر سه تقریباً یکی بودند، و «تقریباً» همان جایی است که فردا واگرا می‌شوند. نسخه‌ی `vendor.css` از قبل واگرا شده بود: دو توکنِ اضافه داشت که دوتای دیگر همان مقدار را داشتند. ⛔⛔ **و سه توکنِ خیالی پیدا شد — هر سه یک خرابیِ زنده.** `var(--x)`ِ تعریف‌نشده و بی مقدارِ جایگزین، اعلان را **نامعتبر** می‌کند: مرورگر خطا نمی‌دهد، فقط آن قاعده را دور می‌اندازد. · `--accent-soft` → پس‌زمینه‌ی ردیفِ **فعالِ** منوی حساب اصلاً نمی‌آمد. · `--bg-subtle` → سرستون و جعبه‌ی **فاکتورِ رسمی** بی‌پس‌زمینه بود. · `--line` → دو خطِ جداکننده (صفِ انبار و پرسش‌وپاسخ) دیده نمی‌شد. 🔴 **و درمانشان «تعریف‌کردن» نبود، «تصحیح‌کردن» بود:** هر سه از قبل معادلِ درست داشتند (`--accent-subtle`، `--surface`، `--border`). تعریفِ توکنِ چهارمِ هم‌معنا، همان منبعِ دومِ حقیقت است. 🔴 **افزودنِ توکنِ تازه:** فقط وقتی هیچ توکنِ موجودی همان معنا را ندارد. نگهبان توکنِ بی‌استفاده را هم قرمز می‌کند. ===================================================================== */ :root{ /* ── پنج خانواده‌ی رنگِ حالت ───────────────────────────────────────── 🔴 **هر خانواده چهار پله دارد، و این چهار پله قرارداد است:** `-subtle` پس‌زمینه‌ی جعبه `-border` حاشیه‌ی همان جعبه پایه متن یا سطحِ اشباع `-deep` متنِ پررنگ روی `-subtle` ⛔⛔ **پله‌ها را قاطی نکنید.** رنگِ پایه روی `-subtle` تضادِ کافی ندارد (زیرِ ۴٫۵:۱)، و `-deep` روی سطحِ سفید بی‌جهت سنگین است. تا ۲۰-ظ۲۳۸ همین پله‌ها به شکلِ عددِ ثابت در شیوه‌نامه‌ها پخش بودند و هیچ‌کس نمی‌دانست خانواده‌اند. */ /* 🔴🔴 **و پله‌ی پنجم، `-text`، که تمِ تیره تحمیلش کرد.** رنگِ پایه تا امروز **دو کار** می‌کرد: سطحِ اشباع (پس‌زمینه‌ی دکمه، با متنِ `--on-solid` رویش) و **متنِ لینک** روی پس‌زمینه‌ی صفحه. در تمِ روشن هر دو با یک رنگ جواب می‌دهند؛ در تیره **نمی‌شود**: · آبی را روشن کنیم تا لینک خوانا شود → متنِ سفیدِ روی دکمه ۲:۱. · آبی را تیره نگه داریم تا دکمه جواب دهد → لینک ۳٫۶:۱، زیرِ حد. ⚠️ **امروز `-text` دقیقاً برابرِ پایه است، پس هیچ پیکسلی عوض نشد.** واگرایی‌شان در تمِ تیره اتفاق می‌افتد — و همان‌جاست که این تفکیک تنها چیزی است که تضادِ ۴٫۵:۱ را در هر دو جا ممکن می‌کند. */ --primary:#0369A1; --primary-text:#0369A1; --primary-hover:#075985; --primary-light:#E0F2FE; --primary-subtle:#F0F9FF; --primary-border:#BAE6FD; --primary-deep:#0C4A6E; --accent:#DC2626; --accent-text:#DC2626; --accent-subtle:#FEF2F2; --accent-border:#FECACA; --accent-deep:#7F1D1D; --warn:#B45309; --warn-text:#B45309; --warn-subtle:#FFFBEB; --warn-border:#FDE68A; --warn-deep:#78350F; --success:#047857; --success-text:#047857; --success-subtle:#ECFDF5; --success-border:#A7F3D0; --success-deep:#065F46; /* 🔴 بنفش عمداً از قرمز جداست: «محدود» خطا نیست، قفلِ باقاعده است. */ --restricted:#7C3AED; --restricted-text:#7C3AED; --restricted-subtle:#F5F3FF; --restricted-border:#DDD6FE; --restricted-deep:#5B21B6; /* ── سطح و متن ───────────────────────────────────────────────────── */ --bg:#FFFFFF; --surface:#F8FAFC; --surface-2:#F1F5F9; --border:#E2E8F0; --border-strong:#CBD5E1; /* 🔴🔴 **و `--fg-subtle` در ۲۰-ظ۲۴۲ تیره‌تر شد — از `#7C8AA0` به این.** جاروی تضاد نشان داد روی هر سه سطحِ تمِ روشن زیرِ حد بود: کاغذ ۳٫۵۰، کارت ۳٫۳۵، سطحِ دوم ۳٫۱۹ — و **سرستونِ جدول‌ها** با همین می‌آمد. ⛔⛔ **و تصمیمِ کارفرما «تفکیک» بود، نه «تیره‌کردنِ همه»:** این توکن از امروز **فقط متن** است. جای‌گیرِ تزئینی لاینِ خودش را دارد (`--fg-placeholder`) و عمداً کم‌رنگ می‌ماند. تا دیروز یک توکن دو کار می‌کرد، و خوانایی قربانیِ تزئین می‌شد. 🔴 تمِ تیره دست نخورد: آنجا از قبل ۴٫۵۸ تا ۵٫۷۵ بود. */ --fg:#0F172A; --fg-muted:#475569; --fg-subtle:#5F6E85; /* 🔴🔴 **`--on-solid` با `--bg` یکی نیست، هرچند امروز هر دو سفیدند.** `--bg` سطحِ صفحه است و در تمِ تیره **تیره می‌شود**؛ `--on-solid` متنی است که روی رنگِ اشباع می‌نشیند (دکمه‌ی آبی، نشانِ قرمز) و در هر دو تم **سفید می‌ماند**. تا ۲۰-ظ۲۳۸ هر دو `#fff` نوشته می‌شدند — ۲۲۶ تا از نوعِ اول و ۱۲۳ تا از نوعِ دوم — و تفکیک‌نکردنشان یعنی تمِ تیره متنِ دکمه‌ها را هم تیره کند. */ --on-solid:#FFFFFF; /* ── پوسته‌ی پنل ───────────────────────────────────────────────────── 🔴 سایدبارِ پنل **از همان تمِ روشن هم تیره است** — یعنی این خانواده در تمِ تیره کم‌تر از بقیه تکان می‌خورد. (تا ۲۰-ظ۲۸۶ ادمین `--panel-bg-admin` جدا داشت؛ از ۲۸۷ هر دو پنل همان فیروزه‌ایِ بلوکِ `vpanel` را می‌گیرند. ⚠️ توکن **می‌ماند** چون ماکاپ‌های `ui/` (`ui/admin.css`) هنوز می‌خوانندش و `CssTokenGuardTest` آن‌ها را هم می‌سنجد؛ محصول دیگر به آن ارجاع نمی‌دهد.) */ --panel-bg:#0F172A; --panel-bg-admin:#111827; --panel-fg:#CBD5E1; --panel-fg-muted:#94A3B8; --panel-fg-dim:#64748B; --panel-fg-subtle:#7C8AA0; /* ── لایه‌های سفید روی سطحِ تیره ─────────────────────────────────────── ⛔⛔ **اینجا پیش از ۲۰-ظ۲۳۹ پانزده مقدارِ متفاوت بود، برای پنج کار:** `.06 .09 .12 .14 .16 .22 .24 .25 .28 .45 .55 .6 .75 .92 .94`. 🔴 هیچ‌کدام تصمیم نبودند — هر کدام یک بار، در یک برش، با چشم انتخاب شده بودند. نتیجه‌اش این بود که دو چیزِ **هم‌نقش** (مثلاً hoverِ منوی پنل و hoverِ تبِ عرضه) دو شفافیتِ متفاوت داشتند و هیچ‌کس نمی‌دید. ⚠️ **این اولین تغییرِ بصریِ عمدیِ این برنامه است** — برخلافِ ۲۳۷ و ۲۳۸ که اثباتاً هیچ پیکسلی را عوض نکردند. بیشترین جابه‌جایی ۰٫۰۵ آلفاست. */ --on-dark-hover:rgba(255,255,255,.08); --on-dark-line:rgba(255,255,255,.12); --on-dark-chip:rgba(255,255,255,.20); --on-dark-chip-on:rgba(255,255,255,.28); --on-dark-edge:rgba(255,255,255,.60); --on-dark-muted:rgba(255,255,255,.75); /* 🔴 شیشه: دکمه‌ی شناور روی **عکس**، نه روی سطحِ تیره. جدا نگه داشته شد چون در تمِ تیره هم باید روشن بماند — عکس عکس است. */ --glass:rgba(255,255,255,.93); --glass-dim:rgba(255,255,255,.45); /* ── پرده و سایه ───────────────────────────────────────────────────── 🔴 سه پله، چون سه کار: پرده‌ی سبکِ گالری، پرده‌ی مودال، و پرده‌ی پررنگِ روی ویدیو. یکی‌کردنشان مودال را کدر و گالری را تاریک می‌کرد. */ --scrim-soft:rgba(15,23,42,.25); --scrim:rgba(15,23,42,.50); --scrim-deep:rgba(15,23,42,.75); --sh-bar:0 -4px 20px rgba(15,23,42,.09); --sh-drawer:-12px 0 32px rgba(15,23,42,.14); --sh-modal:0 20px 60px rgba(15,23,42,.30); --swatch-edge:rgba(0,0,0,.12); /* ── سه توکن که ۲۳۹ لازمشان کرد ────────────────────────────────────── 🔴 هر سه از رنگِ ثابتِ پخش‌شده بیرون آمدند، نه از هوا: `--fg-placeholder` جای‌گیرِ تصویرِ نیامده — سیزده جا با یک عددِ ثابت. `--panel-field-*` فرمِ خبرنامه روی **فوترِ تیره** می‌نشیند، پس نه `--surface` می‌خواهد نه `--border`؛ در تمِ تیره هم باید تیره بماند، نه روشن‌تر شود. */ --fg-placeholder:#B6C2D2; --panel-field-bg:#1E293B; --panel-field-border:#334155; /* ── نشانِ focus — برش ۲۰-ظ۲۴۱ ─────────────────────────────────────── ⛔⛔ **این تنها توکنِ رنگی است که به سطحِ زیرش کار ندارد، و عمداً.** نشانِ focus باید روی **هر** سطحی دیده شود: کاغذِ سفید، کارت، سایدبارِ تیره، فوترِ تیره، و فیلدِ خبرنامه — و این پنج سطح **در همان تمِ روشن** کنارِ هم‌اند. پس رنگِ تم‌دار جوابشان را نمی‌دهد. 🔴 عدد انتخاب نشد، جست‌وجو شد: `#2E86C8` کمینه‌ی **۳٫۵۸:۱** روی هر دوازده سطحِ دو تم می‌دهد (WCAG 1.4.11 حدِ ۳:۱ برای مرزِ مؤلفه). `--primary` این کار را **نمی‌کند**: روی سایدبارِ تمِ روشن ۳٫۰۱ و روی فیلدِ خبرنامه ۲٫۴۷، و در تمِ تیره روی کارت ۲٫۷۴. ⛔⛔ **و چرا کلاً لازم شد:** ده اعلانِ `outline:none` قاعده‌ی سراسریِ `:focus-visible` را خاموش می‌کردند و به‌جایش فقط **رنگِ حاشیه** را عوض می‌کردند. آن تغییرِ رنگ در تمِ تیره **۱٫۱۴:۱** است — یعنی کاربرِ صفحه‌کلید در تمِ تیره هیچ‌چیز نمی‌بیند. ⚠️ **و حلقه هیچ‌وقت نشان نبود:** `box-shadow:0 0 0 3px var(--primary-light)` در هر دو تم زیرِ ۱٫۲:۱ است. تزئین بود، و چون *چیزی* دیده می‌شد کسی نپرسید **چقدر**. */ --focus:#2E86C8; /* ── مقیاسِ قلم — برش ۲۰-ظ۲۴۴ ───────────────────────────────────────── ⛔⛔ **پیش از این ۳۱ پله بود، برای ۱۲۱۶ اعلان.** و بیشترشان تصمیم نبودند: ۱۲ و ۱۲٫۵، ۱۳ و ۱۳٫۵، ۱۴ و ۱۴٫۵ کنارِ هم می‌نشستند — فرقی که **هیچ چشمی نمی‌بیند** و فقط در `git diff` وجود دارد. هر کدام یک بار، در یک برش، با چشم انتخاب شده بود. همان شکلی که ۲۰-ظ۲۳۹ در آلفاها پیدا کرد: پانزده مقدار برای پنج کار. 🔴🔴 **و ۳۸۵ اعلان (۳۲٪) زیرِ ۱۲px بودند** — تا ۸٫۵px. متنِ ۱۱px در فارسی، با وزیرمتن، روی موبایل، برای خریداری که عینک می‌زند. کارفرما «سخت‌گیر، کف ۱۲» را انتخاب کرد (تصمیم ۱۵۶). 🔴 **و نگاشت در گره‌ها به بالا می‌رود، نه پایین:** متن هرگز کوچک‌تر نمی‌شود. ۱۶ می‌شود ۱۷، نه ۱۵ — که اتفاقاً پله‌های دکمه را هم (۱۴ / ۱۵ / ۱۷) سالم نگه می‌دارد. ⚠️ نسبت‌ها عمداً در تنه‌ی متن تنگ‌اند و در تیترها باز می‌شوند: خواننده باید بینِ ۱۲ و ۱۳ فرقِ **نقش** ببیند، نه فرقِ اندازه. */ --fs-1:12px; --fs-2:13px; --fs-3:14px; --fs-4:15px; --fs-5:17px; --fs-6:19px; --fs-7:22px; --fs-8:26px; --fs-9:32px; --fs-10:44px; /* ── مقیاسِ فاصله ────────────────────────────────────────────────── */ --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px; --s9:96px; /* ── ارتفاعِ نوارِ پاییِن موبایل — برش ۲۰-ظ۳۲۱ ─────────────────────── ⛔⛔ **جمع نوشته می‌شود، نه ۶۵، چون همین رابطه بود که شکست.** نوار ۶۴ پیکسل بلندی دارد (`min-height:var(--s8)` روی لنگرها) به‌علاوه‌ی حاشیه‌ی یک‌پیکسلیِ بالا — و فضای رزروشده‌ی بدنه ۶۴ بود، پس یک پیکسلِ انتهای محتوا زیرِ نوار می‌ماند. کاوشگرِ رندر در ۲۰-ظ۳۲۱ آن را روی **هفت صفحه‌ی ویترین** دید؛ متنِ CSS هیچ‌جا دروغ نمی‌گفت، چون جمعِ ۶۴ و حاشیه در هیچ عبارتی نوشته نشده بود. 🔴 هر سه جای حسابِ «فضا ⟺ نوار» از همین یک توکن می‌خوانند: رزروِ بدنه، رزروِ بدنه‌ی نوارِ خریدِ چسبان، و `bottom`ِ خودِ آن نوارها. */ --mobnav-h:calc(var(--s8) + 1px); /* ── شعاع ───────────────────────────────────────────────────────── */ --r-sm:6px; --r:10px; --r-lg:14px; --r-xl:20px; --r-full:999px; /* ── سایه ───────────────────────────────────────────────────────── */ --sh-sm:0 1px 2px rgba(15,23,42,.06); --sh:0 2px 8px rgba(15,23,42,.07); --sh-lg:0 8px 28px rgba(15,23,42,.10); /* ── حرکت و چیدمان ──────────────────────────────────────────────── */ /* ⚠️ `--hdr:0px` اینجا بود و **هیچ‌کس نمی‌خواندش** — فسیلِ افستِ هدرِ چسبانی که هرگز ساخته نشد. نگهبانِ همین برش در اولین اجرا پیدایش کرد و برداشته شد، نه معاف. (توکنِ صفرِ بی‌خواننده، دعوت‌نامه‌ی کسی است که فردا فکر می‌کند هدرِ چسبان هست.) */ --t:200ms cubic-bezier(.4,0,.2,1); --maxw:1320px; } /* ===================================================================== تمِ تیره — برش ۲۰-ظ۲۳۹ --------------------------------------------------------------------- 🔴🔴 **فقط با `data-theme="dark"` روشن می‌شود، نه با `prefers-color-scheme`.** تصمیمِ ۱۴۷ کارفرما: پیش‌فرض همیشه روشن است. کاربری که ویندوزش اتفاقی تیره است نباید یک روز با فروشگاهِ سیاه روبه‌رو شود — «جابه‌جایی خاموش ممنوع». یک راه، نه دو. ⛔⛔ **هر عددِ اینجا سنجیده شده، نه انتخاب‌شده.** معیارها: · متن روی صفحه و کارت …………… ≥ ۴٫۵:۱ · متنِ سفید روی دکمه‌ی اشباع … ≥ ۴٫۵:۱ · سطحِ دکمه در برابر صفحه …… ≥ ۳:۱ (مرزِ مؤلفه، WCAG 1.4.11) · متنِ پررنگ روی جعبه‌ی هم‌خانواده ≥ ۴٫۵:۱ 🔴 **و دو جا که شهود غلط بود و عدد درستش کرد:** ۱. `--primary` **روشن‌تر نشد، کمی تیره‌تر شد** (`#0C6FA8`). نسخه‌ی روشن‌ترِ اول (`#0284C7`) متنِ سفیدِ روی دکمه را به **۴٫۱۰** می‌رساند — زیرِ حد. متنِ لینک کارِ `--primary-text` است، نه این. ۲. `--primary-hover` در تمِ تیره **تیره‌تر** می‌شود، نه روشن‌تر — چون دکمه از قبل متنِ سفید دارد و روشن‌ترشدن آن را می‌خورد. ⚠️ پس‌زمینه عمداً سیاهِ خالص نیست (`#0B1220`): سیاهِ مطلق روی نمایشگرِ OLED لبه‌ها را می‌خورد و خستگیِ چشم را بیشتر می‌کند. ===================================================================== */ :root[data-theme="dark"]{ /* ── سطح و متن ───────────────────────────────────────────────────── */ --bg:#0B1220; --surface:#121C2E; --surface-2:#1A2740; --border:#2B3D5C; --border-strong:#4E6188; --fg:#E8EEF8; --fg-muted:#A9BAD1; --fg-subtle:#7E90A9; /* 🔴 `--on-solid` **عوض نمی‌شود** — متنِ روی رنگِ اشباع در هر دو تم سفید است. کلِ دلیلِ جداکردنش از `--bg` همین خط است. */ /* ── پنج خانواده ─────────────────────────────────────────────────── */ --primary:#0C6FA8; --primary-text:#5CC8F5; --primary-hover:#106699; --primary-light:#0C4A6E; --primary-subtle:#0C2237; --primary-border:#1B4E6E; --primary-deep:#BAE6FD; --accent:#DC2626; --accent-text:#FB7676; --accent-subtle:#2A1416; --accent-border:#5B2528; --accent-deep:#FECACA; --warn:#B45309; --warn-text:#F0A92C; --warn-subtle:#2A1F0D; --warn-border:#5C4415; --warn-deep:#FDE68A; --success:#047857; --success-text:#34D399; --success-subtle:#0C2620; --success-border:#1B4E42; --success-deep:#A7F3D0; --restricted:#7C3AED; --restricted-text:#B69BFB; --restricted-subtle:#1D1733; --restricted-border:#3C2F63; --restricted-deep:#DDD6FE; /* ── پوسته‌ی پنل ────────────────────────────────────────────────────── 🔴 سایدبار در تمِ روشن هم تیره بود، پس اینجا **کم** تکان می‌خورد — فقط آن‌قدر که از سطحِ صفحه جدا بماند. */ --panel-bg:#070C16; --panel-bg-admin:#0A0E18; --panel-fg:#CBD5E1; --panel-fg-muted:#94A3B8; --panel-fg-dim:#7A8AA3; --panel-fg-subtle:#8A9AB2; --fg-placeholder:#55657F; --panel-field-bg:#16223A; --panel-field-border:#2E4162; /* ── سایه ───────────────────────────────────────────────────────────── 🔴 سایه روی سطحِ تیره دیده نمی‌شود؛ پررنگ‌تر می‌شود تا ارتفاع بماند. */ --sh-sm:0 1px 2px rgba(0,0,0,.40); --sh:0 2px 8px rgba(0,0,0,.45); --sh-lg:0 8px 28px rgba(0,0,0,.55); --sh-bar:0 -4px 20px rgba(0,0,0,.45); --sh-drawer:-12px 0 32px rgba(0,0,0,.55); --sh-modal:0 20px 60px rgba(0,0,0,.65); } /* ── پالتِ فروشگاه: سبزآبیِ درمانی — برش ۲۰-ظ۲۷۳ (تصمیمِ کارفرما) ───────── ⛔⛔ **فقط ویترین و صفحه‌های خریدار** (`body.shopbody`) و صفحه‌ی ورود (`body.authbody`) — پنل‌های ادمین و فروشنده همان آبیِ تأییدشده‌ی ۲۳۹ را نگه می‌دارند. پیشنهادِ پلاگینِ `ui-ux-pro-max` برای «مارکت‌پلیسِ لوازمِ دندانپزشکی»: `#0F766E` (اعتمادِ سبزآبی) با تأکیدِ آبی. 🔴 **فقط خانواده‌ی `primary` و سطح‌ها عوض می‌شوند؛** قرمزِ حراج، سبزِ موفقیت و بقیه‌ی خانواده‌ها همان‌اند. سبزِ `#16A34A`ِ پیشنهادیِ پلاگین برای دکمه‌ی خرید **پذیرفته نشد**: متنِ سفید رویش ۳٫۳:۱ است، زیرِ حد؛ دکمه‌ی سبد `--success` (۵٫۴۸:۱) را می‌گیرد. 🔴 عددها سنجیده‌اند و `CssContrastGuardTest` همین بلوک را هم می‌خواند: سفید روی اصلی ۵٫۴۷، متنِ اصلی روی کاغذ ۵٫۴۷، `-deep` روی `-subtle` ۹٫۰۹، نشانِ focus روی کمرنگ‌ترین سطح ۳٫۴۶. */ /* 🔴🔴 برش ۲۰-ظ۲۸۶ — **پنلِ فروشنده (`body.vpanel`) هم** (خواسته‌ی کارفرما: «با رنگِ فروشگاه جور باشد»)، و با آن سایدبار: `--panel-*` فیروزه‌ایِ خیلی تیره می‌شود به‌جای سرمه‌ای. متن‌های سایدبار هم ته‌رنگِ سبزآبی گرفتند تا خاکستریِ آبی روی زمینه‌ی سبزآبی «کثیف» نشود. سنجیده: متنِ منو روی سایدبار ۱۱٫۴، زیرنویس ۷٫۸، سفید روی گزینه‌ی فعال ۵٫۴۷ — و همین بلوک را `CssContrastGuardTest` می‌خواند. */ body.shopbody,body.authbody,body.vpanel{ --primary:#0F766E; --primary-text:#0F766E; --primary-hover:#115E59; --primary-light:#CCFBF1; --primary-subtle:#F0FDFA; --primary-border:#99F6E4; --primary-deep:#134E4A; --surface:#F4FAF9; --surface-2:#E8F3F1; --panel-bg:#0B2E2B; --panel-fg:#D3E8E5; --panel-fg-muted:#A3C4BF; --panel-fg-dim:#7FA39E; --panel-fg-subtle:#8FB2AD; } :root[data-theme="dark"] body.shopbody,:root[data-theme="dark"] body.authbody,:root[data-theme="dark"] body.vpanel{ --primary:#0F766E; --primary-text:#2DD4BF; --primary-hover:#115E59; --primary-light:#134E4A; --primary-subtle:#0A2622; --primary-border:#1E5B55; --primary-deep:#99F6E4; --surface:#121C2E; --surface-2:#1A2740; --panel-bg:#061A18; --panel-fg:#D3E8E5; --panel-fg-muted:#A3C4BF; --panel-fg-dim:#7FA39E; --panel-fg-subtle:#8FB2AD; }