/* ============================================================================
   design/tokens.css — سیستم طراحی رنگ پروژه (Color Design System)
   ----------------------------------------------------------------------------
   این فایل تنها منبع حقیقت (single source of truth) برای رنگ‌های پروژه است.
   در همهٔ صفحات و استایل‌ها باید فقط توکن‌ها فراخوانی شوند، نه مقدار خام:

       ✅  color: var(--text-soft);
       ✅  background-color: var(--bg-surface);
       ✅  border-color: var(--border-color);
       ❌  color: #ffffff;
       ❌  background: rgba(0, 0, 0, .5);

   ساختار فایل:
     ۱) پالت پایه     — Primitives؛ مقدار خام و بی‌معنا، مستقل از تم
     ۲) توکن معنایی   — Semantics؛ نقش رنگ در تم تاریک (پیش‌فرض)
     ۳) توکن معنایی   — Semantics؛ بازنویسی برای تم روشن
     ۴) پل Tailwind   — Bridge؛ نگاشت توکن‌ها روی متغیرهای کلاس‌های Tailwind
     ۵) بازنویسی تم   — جبران رنگ‌های هاردکدِ فایل کامپایل‌شدهٔ style.css
     ۶) کلاس‌های معنایی — تا در HTML هم رنگ صرفاً با توکن فراخوانی شود

   این فایل باید بعد از style.css بارگذاری شود تا بتواند لایهٔ @theme را بازنویسی کند.
   ============================================================================ */

/* ============================================================
   ۱) پالت پایه — Primitives
   فقط اینجا مقدار خام رنگ نوشته می‌شود؛ هیچ‌جای دیگری.
   ============================================================ */
:root {
  /* برند */
  --brand-500: #ff6b00;
  --brand-600: #e96000;

  /* خنثی — تیره (صحنهٔ دارک) */
  --ink-950: #090909;
  --ink-900: #101010;
  --ink-875: #111111;
  --ink-850: #131313;
  --ink-800: #252525;
  --ink-700: #a0a0a0;

  /* خنثی — روشن (صحنهٔ لایت) */
  --paper-0: #ffffff;
  --paper-50: #fbfbfa;
  --paper-100: #f2f1ee;
  --paper-200: #e4e3df;
  --paper-700: #6f6f6a;
  --ink-solid: #17171a;

  /* پایه */
  --pure-white: #ffffff;
  --pure-black: #000000;

  /* وضعیت‌ها — مشترک سایت و پنل کاربری */
  --ok-500: #22c55e;
  --warn-500: #f59e0b;
  --danger-500: #ef4444;
  --info-500: #3b82f6;

  /* نشان شبکه‌های اجتماعی — رنگ رسمی هر برند؛ فقط همین‌جا مقدار خام دارد */
  --social-google-blue: #4285f4;
  --social-google-green: #34a853;
  --social-google-yellow: #fbbc05;
  --social-google-red: #ea4335;
  --social-discord: #5865f2;
  --social-facebook: #1877f2;
}

/* ============================================================
   ۲) توکن‌های معنایی — تم تاریک (پیش‌فرض)
   ============================================================ */
:root,
:root[data-theme="dark"] {
  color-scheme: dark;

  /* برند */
  --brand: var(--brand-500);
  --brand-hover: var(--brand-600);
  --on-brand: var(--pure-white);

  /* سطوح */
  --bg-page: var(--ink-950);
  --bg-surface: var(--ink-900);
  --bg-card: var(--ink-850);
  --bg-header: color-mix(in oklab, var(--bg-page) 80%, transparent);
  --bg-header-scrolled: color-mix(in oklab, var(--ink-875) 93%, transparent);
  --bg-dialog: color-mix(in oklab, var(--ink-900) 58%, transparent);
  --bg-inset: color-mix(in oklab, var(--pure-white) 2.5%, transparent);
  --bg-overlay: color-mix(in oklab, var(--pure-black) 88%, transparent);

  /* متن */
  --text-strong: var(--pure-white);
  --text-soft: color-mix(in oklab, var(--pure-white) 85%, transparent);
  --text-quiet: color-mix(in oklab, var(--pure-white) 65%, transparent);
  --text-muted: var(--ink-700);
  --text-placeholder: color-mix(in oklab, var(--pure-white) 35%, transparent);
  --text-ghost: color-mix(in oklab, var(--pure-white) 2%, transparent);
  --text-on-image: var(--pure-white);

  /* خطوط و سایه */
  --border-color: var(--ink-800);
  --border-hair: color-mix(in oklab, var(--pure-white) 5%, transparent);
  --border-hair-soft: color-mix(in oklab, var(--pure-white) 3.5%, transparent);
  --shadow-color: color-mix(in oklab, var(--pure-black) 45%, transparent);

  /* مشتقات برند */
  --brand-soft: color-mix(in oklab, var(--brand) 12%, transparent);
  --brand-line: color-mix(in oklab, var(--brand) 35%, transparent);
  --brand-line-strong: color-mix(in oklab, var(--brand) 60%, transparent);
  --bg-image-veil: color-mix(in oklab, var(--pure-black) 50%, transparent);

  /* گرادیان برند — نشان و دکمهٔ اصلی از همین سه ایست رنگ می‌گیرند */
  --brand-grad-top: color-mix(in oklab, var(--brand) 55%, var(--pure-white));
  --brand-grad-bottom: color-mix(in oklab, var(--brand) 72%, var(--pure-black));
  --brand-grad-smoke: color-mix(in oklab, var(--pure-white) 72%, var(--brand));

  /* صفحهٔ ورود — شیشه، هاله و شبح‌های پس‌زمینه */
  --auth-glass: color-mix(in oklab, var(--pure-white) 8%, transparent);
  --auth-glass-line: color-mix(in oklab, var(--pure-white) 14%, transparent);
  --auth-glass-gloss: color-mix(in oklab, var(--pure-white) 22%, transparent);
  --auth-field-bg: color-mix(in oklab, var(--pure-white) 6%, transparent);
  --auth-field-line: color-mix(in oklab, var(--pure-white) 10%, transparent);
  --auth-chip: color-mix(in oklab, var(--pure-black) 16%, transparent);
  --auth-halo: color-mix(in oklab, var(--brand) 30%, transparent);

  /* دکمهٔ اصلی (CTA) — گرادیان اشباع برند، جدا از گرادیان نشان */
  --cta-grad-top: color-mix(in oklab, var(--brand) 88%, var(--pure-white));
  --cta-grad-bottom: color-mix(in oklab, var(--brand) 76%, var(--pure-black));
  --auth-orb-a-top: color-mix(in oklab, var(--brand) 42%, transparent);
  --auth-orb-a-bottom: color-mix(in oklab, var(--brand) 6%, transparent);
  --auth-orb-b-top: color-mix(in oklab, var(--brand) 24%, transparent);
  --auth-orb-b-bottom: color-mix(in oklab, var(--brand) 3%, transparent);

  /* وضعیت‌ها — پنل کاربری */
  --success: color-mix(in oklab, var(--ok-500) 78%, var(--pure-white));
  --success-soft: color-mix(in oklab, var(--ok-500) 14%, transparent);
  --success-line: color-mix(in oklab, var(--ok-500) 32%, transparent);

  --warning: color-mix(in oklab, var(--warn-500) 82%, var(--pure-white));
  --warning-soft: color-mix(in oklab, var(--warn-500) 14%, transparent);
  --warning-line: color-mix(in oklab, var(--warn-500) 32%, transparent);

  --danger: color-mix(in oklab, var(--danger-500) 76%, var(--pure-white));
  --danger-soft: color-mix(in oklab, var(--danger-500) 14%, transparent);
  --danger-line: color-mix(in oklab, var(--danger-500) 32%, transparent);

  --info: color-mix(in oklab, var(--info-500) 78%, var(--pure-white));
  --info-soft: color-mix(in oklab, var(--info-500) 14%, transparent);
  --info-line: color-mix(in oklab, var(--info-500) 32%, transparent);

  /* پنل کاربری — لایه‌ها، شیشه و بافت پس‌زمینه */
  --panel-sidebar: color-mix(in oklab, var(--bg-surface) 92%, transparent);
  --panel-glow: color-mix(in oklab, var(--brand) 10%, transparent);
  --panel-grid: color-mix(in oklab, var(--pure-white) 3%, transparent);
  --panel-hover: color-mix(in oklab, var(--pure-white) 5%, transparent);
  --panel-active: color-mix(in oklab, var(--brand) 12%, transparent);
  --panel-raised: color-mix(in oklab, var(--pure-white) 4%, transparent);
}

/* ============================================================
   ۳) توکن‌های معنایی — تم روشن
   ============================================================ */
:root[data-theme="light"] {
  color-scheme: light;

  /* برند در تم روشن هم همان نارنجی می‌ماند */
  --brand: var(--brand-500);
  --brand-hover: var(--brand-600);
  --on-brand: var(--pure-white);

  /* سطوح */
  --bg-page: var(--paper-50);
  --bg-surface: var(--paper-100);
  --bg-card: var(--paper-0);
  --bg-header: color-mix(in oklab, var(--bg-page) 80%, transparent);
  --bg-header-scrolled: color-mix(in oklab, var(--paper-0) 74%, transparent);
  --bg-dialog: color-mix(in oklab, var(--paper-50) 95%, transparent);
  --bg-inset: color-mix(in oklab, var(--ink-solid) 2.5%, transparent);
  --bg-overlay: color-mix(in oklab, var(--ink-solid) 35%, transparent);

  /* متن */
  --text-strong: var(--ink-solid);
  --text-soft: color-mix(in oklab, var(--ink-solid) 85%, transparent);
  --text-quiet: color-mix(in oklab, var(--ink-solid) 65%, transparent);
  --text-muted: var(--paper-700);
  --text-placeholder: color-mix(in oklab, var(--ink-solid) 40%, transparent);
  --text-ghost: color-mix(in oklab, var(--ink-solid) 5%, transparent);
  --text-on-image: var(--pure-white);

  /* خطوط و سایه */
  --border-color: var(--paper-200);
  --border-hair: color-mix(in oklab, var(--ink-solid) 8%, transparent);
  --border-hair-soft: color-mix(in oklab, var(--ink-solid) 6%, transparent);
  --shadow-color: color-mix(in oklab, var(--ink-solid) 22%, transparent);

  /* مشتقات برند */
  --brand-soft: color-mix(in oklab, var(--brand) 10%, transparent);
  --brand-line: color-mix(in oklab, var(--brand) 40%, transparent);
  --brand-line-strong: color-mix(in oklab, var(--brand) 60%, transparent);
  --bg-image-veil: color-mix(in oklab, var(--pure-black) 45%, transparent);

  /* گرادیان برند — نشان و دکمهٔ اصلی از همین سه ایست رنگ می‌گیرند */
  --brand-grad-top: color-mix(in oklab, var(--brand) 45%, var(--pure-white));
  --brand-grad-bottom: color-mix(in oklab, var(--brand) 85%, var(--pure-black));
  --brand-grad-smoke: color-mix(in oklab, var(--pure-white) 85%, var(--ink-solid));

  /* صفحهٔ ورود — شیشه، هاله و شبح‌های پس‌زمینه */
  --auth-glass: color-mix(in oklab, var(--paper-0) 74%, transparent);
  --auth-glass-line: color-mix(in oklab, var(--ink-solid) 7%, transparent);
  --auth-glass-gloss: color-mix(in oklab, var(--pure-white) 92%, transparent);
  --auth-field-bg: color-mix(in oklab, var(--paper-0) 88%, transparent);
  --auth-field-line: color-mix(in oklab, var(--ink-solid) 8%, transparent);
  --auth-chip: color-mix(in oklab, var(--pure-black) 16%, transparent);
  --auth-halo: color-mix(in oklab, var(--brand) 24%, transparent);

  /* دکمهٔ اصلی (CTA) — گرادیان اشباع برند، جدا از گرادیان نشان */
  --cta-grad-top: color-mix(in oklab, var(--brand) 92%, var(--pure-white));
  --cta-grad-bottom: color-mix(in oklab, var(--brand) 80%, var(--pure-black));
  --auth-orb-a-top: color-mix(in oklab, var(--brand) 22%, var(--paper-100));
  --auth-orb-a-bottom: color-mix(in oklab, var(--brand) 5%, var(--paper-50));
  --auth-orb-b-top: color-mix(in oklab, var(--brand) 14%, var(--paper-100));
  --auth-orb-b-bottom: color-mix(in oklab, var(--brand) 3%, var(--paper-50));

  /* وضعیت‌ها — پنل کاربری */
  --success: color-mix(in oklab, var(--ok-500) 82%, var(--pure-black));
  --success-soft: color-mix(in oklab, var(--ok-500) 12%, transparent);
  --success-line: color-mix(in oklab, var(--ok-500) 28%, transparent);

  --warning: color-mix(in oklab, var(--warn-500) 78%, var(--pure-black));
  --warning-soft: color-mix(in oklab, var(--warn-500) 12%, transparent);
  --warning-line: color-mix(in oklab, var(--warn-500) 28%, transparent);

  --danger: color-mix(in oklab, var(--danger-500) 82%, var(--pure-black));
  --danger-soft: color-mix(in oklab, var(--danger-500) 10%, transparent);
  --danger-line: color-mix(in oklab, var(--danger-500) 26%, transparent);

  --info: color-mix(in oklab, var(--info-500) 82%, var(--pure-black));
  --info-soft: color-mix(in oklab, var(--info-500) 10%, transparent);
  --info-line: color-mix(in oklab, var(--info-500) 26%, transparent);

  /* پنل کاربری — لایه‌ها، شیشه و بافت پس‌زمینه */
  --panel-sidebar: color-mix(in oklab, var(--paper-100) 92%, transparent);
  --panel-glow: color-mix(in oklab, var(--brand) 8%, transparent);
  --panel-grid: color-mix(in oklab, var(--ink-solid) 4%, transparent);
  --panel-hover: color-mix(in oklab, var(--ink-solid) 4%, transparent);
  --panel-active: color-mix(in oklab, var(--brand) 10%, transparent);
  --panel-raised: var(--paper-0);
}

/* ============================================================
   ۴) پل Tailwind — Bridge
   کلاس‌های تولیدشدهٔ Tailwind از این متغیرها استفاده می‌کنند؛ بنابراین با
   تغییر تم، کلاس‌هایی مثل bg-surface / text-muted / border-line هم خودکار
   رنگ درست را می‌گیرند و نیازی به تکرار رنگ در HTML نیست.
   ============================================================ */
:root {
  --color-accent: var(--brand);
  --color-accent-hover: var(--brand-hover);

  --color-dark: var(--bg-page);
  --color-surface: var(--bg-surface);
  --color-card: var(--bg-card);
  --color-line: var(--border-color);
  --color-muted: var(--text-muted);
  --color-white: var(--text-strong);
}

/* ============================================================
   ۵) بازنویسی تم — جبران رنگ‌های هاردکدِ کامپایل‌شده
   چند نقطه در خروجی Tailwind/کامپوننت‌ها مقدار ثابت داشتند (مثل #252525 برای
   خطوط تزئینی). اینجا همان‌ها به توکن وصل می‌شوند تا در تم روشن هم درست باشند.
   ============================================================ */
#header {
  background-color: var(--bg-header);
  border-bottom-color: var(--border-color);
}

#header.is-scrolled {
  background-color: var(--bg-header-scrolled);
  border-bottom-color: var(--border-color);
  box-shadow: 0 12px 32px -16px var(--shadow-color);
}

body[data-page="panel"] #main::before,
body[data-page="panel"] #main::after {
  border-color: transparent;
}

footer {
	border-top-color: var(--border-hair);
}

dialog::backdrop {
  background: var(--bg-overlay);
}

#searchDialog {
	background: #1c1b227a;
	backdrop-filter: blur(20px);
}

.field::placeholder {
  color: var(--text-placeholder);
}

.btn:hover,
.btn-orange:hover {
  color: var(--on-brand);
}

.ghost-title {
	color: var(--text-ghost);
	font-family: Rastin Plus Line;
}

/* متن روی زمینهٔ برند همیشه روشن می‌ماند (نه هم‌رنگ متن صفحه) */
.bg-accent,
.btn-orange,
.tx-on-brand {
  color: var(--on-brand);
}

/* ============================================================
   ۶) کلاس‌های معنایی — استفاده در HTML
   تا در مارک‌آپ هم رنگ فقط از طریق توکن فراخوانی شود.
   ============================================================ */
.tx-strong {
  color: var(--text-strong);
}

.tx-soft {
  color: var(--text-soft);
}

.tx-quiet {
  color: var(--text-quiet);
}

.tx-muted {
  color: var(--text-muted);
}

.tx-brand {
  color: var(--brand);
}

.tx-on-image {
  color: var(--text-on-image);
}

.bg-veil {
  background-color: var(--bg-image-veil);
}

.surface-page {
  background-color: var(--bg-page);
}

.surface-soft {
  background-color: var(--bg-surface);
}

.surface-card {
  background-color: var(--bg-card);
}

.surface-inset {
  background-color: var(--bg-inset);
}

.hairline {
  border-color: var(--border-color);
}

.hairline-soft {
  border-color: var(--border-hair);
}