/* ──────────────────────────────────────────────────────────────────────
   توکن‌های طراحی — سمانه صدیقی، روانشناس بالینی

   سبک: آبرنگ و خط‌قلم (مرجع: The Big Bad Fox and Other Tales).
   سبز پایه #8BB38E روی سفیدِ کاغذی. تم روشن پیش‌فرض است.

   ⚠ هر رنگی که صحنه‌ی سه‌بعدی هم لازم دارد، اینجا و فقط اینجا تعریف
     می‌شود. `scene/index.js` همین متغیرها را با getComputedStyle
     می‌خواند و با تعویض تم دوباره می‌خواند و lerp می‌کند. اگر رنگی را
     مستقیم در جاوااسکریپت بنویسید، تم تیره روی صحنه اثر نمی‌کند.
   ────────────────────────────────────────────────────────────────────── */

:root {
  color-scheme: light;

  /* ── سبزها، از #8BB38E ──
     ⚠ ۵۰۰ برای متن روی سفید کنتراست کافی ندارد (≈۲.۴:۱). هر جا متن یا
       آیکون است باید ۷۰۰ یا تیره‌تر باشد؛ ۵۰۰ فقط برای سطح و لکه. */
  --brand-900: #223d29;
  --brand-800: #33543a;
  --brand-700: #47704e;   /* کمینه‌ی متن روی سفید — ۴.۹:۱ */
  --brand-600: #5f8e66;
  --brand-500: #8bb38e;   /* رنگ پایه‌ی خواسته‌شده */
  --brand-400: #a6c6a8;
  --brand-300: #c1d8c3;
  --brand-200: #dae8db;
  --brand-100: #eaf1ea;
  --brand-050: #f4f8f4;

  /* ── شکوفه: صورتی گَردآلودِ آبرنگی (تنها رنگ گرم سایت) ── */
  --bloom-300: #f2c3cd;
  --bloom-400: #e5a0b1;
  --bloom-500: #c97b90;

  /* ── زمینه و متن ──
     سفیدِ کاغذی، نه سفیدِ نمایشگر: یک قطره گرمی دارد تا لکه‌های آبرنگ
     رویش بنشینند و «چاپ‌شده» دیده شود. */
  --bg: #fbfaf6;
  --bg-2: #ffffff;
  --paper: #f6f4ec;
  --fg: #2c3a30;
  --fg-strong: #1b2620;
  --muted: #63756a;
  --line: rgba(71, 112, 78, 0.16);

  /* ── شیشه ── */
  --glass: rgba(255, 255, 255, 0.62);
  --glass-strong: rgba(255, 255, 255, 0.82);
  --glass-line: rgba(71, 112, 78, 0.16);
  --glass-hi: rgba(255, 255, 255, 0.92);
  --glass-shadow: rgba(44, 70, 52, 0.15);
  --glass-blur: 20px;

  /* ── فاصله و شکل ── */
  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 26px;
  --r-xl: 34px;
  --r-pill: 999px;

  --shell: 1180px;
  --gutter: 20px;

  /* ── حرکت ── */
  --ease-calm: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-glide: cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast: 0.18s;
  --t-mid: 0.36s;
  --t-slow: 0.7s;
  /* پرش تم روی صحنه‌ی سه‌بعدی ۶۰۰ms طول می‌کشد؛ DOM هم همان‌قدر */
  --t-theme: 0.6s;

  /* ── رنگ‌های صحنه‌ی شاخه ──
     نمونه‌برداری‌شده از عکس مرجع، با کمی چرخش به سمت سبزِ برند تا با
     بقیه‌ی صفحه یکی باشد. همه در جاوااسکریپت هم خوانده می‌شوند، ولی
     نه با getComputedStyle: مستقیم داخل `style="fill:var(--...)"`
     می‌نشینند، پس عوض‌شدنِ تم بدونِ هیچ کدی روی صحنه اثر می‌کند. */
  --s-bark-dark: #2f231a;
  --s-bark: #4a3527;
  --s-bark-lite: #7a5a40;
  --s-bark-rim: #a8835f;
  --s-leaf-deep: #4c6d2a;
  --s-leaf: #6f9a37;
  --s-leaf-lite: #9bc04a;
  --s-leaf-glow: #c6de77;
  --s-vein: #e4efb8;
  --s-leaf-tip: #f4f6cf;
  --s-bloom-deep: #e2a2af;
  --s-bloom: #f3c6cd;
  --s-bloom-lite: #fdeaec;
  --s-stamen: #dfae52;
  --s-sun: #ffe6b0;
  --s-sun-warm: #ffcf86;
  --s-ray: rgba(255, 197, 112, 0.26);
  --s-ray-2: rgba(255, 210, 140, 0.16);
  --s-haze: rgba(255, 214, 152, 0.34);

  /* هاله‌ی پشتِ تیترها — تیتر روی شاخ و برگ باید خوانا بماند بدون اینکه
     یک مستطیلِ کدر روی نقاشی بیفتد. لبه‌ی این هاله هیچ‌جا خط ندارد. */
  --halo-1: rgba(251, 250, 246, 0.96);
  --halo-2: rgba(251, 250, 246, 0.72);

}

/* ⚠ دو بلاک زیر عمدی تکراری‌اند و هر دو لازم‌اند:
     ۱) `[data-theme="dark"]` — انتخاب صریح کاربر، بر همه مقدم
     ۲) media + `:not([data-theme="light"])` — تنظیم سیستمی وقتی کاربر
        انتخابی نکرده؛ قید `:not` لازم است وگرنه «همیشه روشن» را می‌شکند
   بدون هر دو، یا کلید تم در یک جهت کار نمی‌کند یا تنظیم سیستم نادیده
   گرفته می‌شود.

   تم تیره اینجا «شبِ آبرنگ» است: کاغذِ تیره‌ی مرکب‌خورده، نه سیاهیِ
   دیجیتال. رنگ‌های خودِ نقاشی تقریباً همان می‌مانند، فقط سیرتر و
   کم‌نورتر — مثل همان تصویر زیر نور شمع. */

:root[data-theme="dark"] {
  color-scheme: dark;

  --brand-700: #9cc6a0;
  --brand-600: #8bb38e;
  --brand-500: #7ba57f;
  --brand-400: #6a9370;
  --brand-300: #b4d4b6;

  --bg: #121a15;
  --bg-2: #18241d;
  --paper: #1b2720;
  --fg: #e2eae3;
  --fg-strong: #f4f8f4;
  --muted: #9aae9f;
  --line: rgba(193, 216, 195, 0.15);

  --glass: rgba(30, 45, 36, 0.58);
  --glass-strong: rgba(34, 52, 41, 0.8);
  --glass-line: rgba(193, 216, 195, 0.14);
  --glass-hi: rgba(200, 230, 205, 0.12);
  --glass-shadow: rgba(0, 0, 0, 0.48);

  --s-bark-dark: #17110c;
  --s-bark: #2b1f16;
  --s-bark-lite: #4c3928;
  --s-bark-rim: #705439;
  --s-leaf-deep: #2f4b1d;
  --s-leaf: #486a26;
  --s-leaf-lite: #6d8e35;
  --s-leaf-glow: #92ad50;
  --s-vein: #a9be77;
  --s-leaf-tip: #8ba055;
  --s-bloom-deep: #8d626e;
  --s-bloom: #b3838e;
  --s-bloom-lite: #d5abb3;
  --s-stamen: #a57c35;
  --s-sun: #f2d79c;
  --s-sun-warm: #e0b876;
  --s-ray: rgba(255, 226, 168, 0.16);
  --s-ray-2: rgba(255, 232, 186, 0.10);
  --s-haze: rgba(255, 232, 186, 0.20);

  --halo-1: rgba(18, 26, 21, 0.94);
  --halo-2: rgba(18, 26, 21, 0.64);

}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --brand-700: #9cc6a0;
    --brand-600: #8bb38e;
    --brand-500: #7ba57f;
    --brand-400: #6a9370;
    --brand-300: #b4d4b6;

    --bg: #121a15;
    --bg-2: #18241d;
    --paper: #1b2720;
    --fg: #e2eae3;
    --fg-strong: #f4f8f4;
    --muted: #9aae9f;
    --line: rgba(193, 216, 195, 0.15);

    --glass: rgba(30, 45, 36, 0.58);
    --glass-strong: rgba(34, 52, 41, 0.8);
    --glass-line: rgba(193, 216, 195, 0.14);
    --glass-hi: rgba(200, 230, 205, 0.12);
    --glass-shadow: rgba(0, 0, 0, 0.48);

  
  --s-bark-dark: #17110c;
  --s-bark: #2b1f16;
  --s-bark-lite: #4c3928;
  --s-bark-rim: #705439;
  --s-leaf-deep: #2f4b1d;
  --s-leaf: #486a26;
  --s-leaf-lite: #6d8e35;
  --s-leaf-glow: #92ad50;
  --s-vein: #a9be77;
  --s-leaf-tip: #8ba055;
  --s-bloom-deep: #8d626e;
  --s-bloom: #b3838e;
  --s-bloom-lite: #d5abb3;
  --s-stamen: #a57c35;
  --s-sun: #f2d79c;
  --s-sun-warm: #e0b876;
  --s-ray: rgba(255, 226, 168, 0.16);
  --s-ray-2: rgba(255, 232, 186, 0.10);
  --s-haze: rgba(255, 232, 186, 0.20);

  --halo-1: rgba(18, 26, 21, 0.94);
  --halo-2: rgba(18, 26, 21, 0.64);

}
}