/* ═══════════════════════════════════════════════════════════════════
   آینه · توکن‌های طراحی  («آینه‌ی مه‌گرفته»)
   هر توکن یک دلیل دارد؛ دلیل‌ها در design-system/README.md نوشته شده‌اند.
   این فایل را مستقیم ویرایش نکن: tokens.src.css منبع است و tokens.css
   با `python build.py` از روی آن ساخته می‌شود (بلوک تیره دوبار لازم است).
   ═══════════════════════════════════════════════════════════════════ */

@font-face {
    font-family: "Vazirmatn";
    src: url("../fonts/Vazirmatn-variable.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

/* صدای انسان‌ها: دست‌خط خودکاری. فقط جایی که یک آدم حرف می‌زند (خود کاربر یا راوی داستان) */
@font-face {
    font-family: "Playpen Sans Arabic";
    src: url("../fonts/PlaypenSansArabic-400.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Playpen Sans Arabic";
    src: url("../fonts/PlaypenSansArabic-700.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

:root {
    /* ── ۱. مواد خام رنگ ─────────────────────────────────────────────
       مه (fog): لایه‌ی خنک و اسطوخودوسی صفحه؛ «هنوز شکل نگرفته».
       کاغذ (paper): گرم؛ یعنی «مال خودت»، نوشته‌ی خصوصی.
       جوهر (ink): بنفش بادمجانی؛ متن و خط، نرم‌تر از سیاه.
       کاشی (tile): فیروزه‌ی کاشی‌کاری؛ فقط برای «کاری که می‌شود کرد».
       زعفران (saffron): گرمای «امروز» و «تو».
       شمعدانی (geranium): فقط برای «شبیه من بود»؛ حس همدلی. */
    --fog-50: #f5f2fa;
    --fog-100: #ece7f4;
    --fog-200: #dfd7ec;
    --fog-300: #cfc4e0;
    --paper: #fffbf2;
    --paper-shade: #f6ecd8;
    --paper-line: #e6d6b8;
    --ink: #2a2040;
    --ink-soft: #5e5375;
    --ink-faint: #8b81a0;
    --tile-700: #14595a;
    --tile-600: #1b6f6e;
    --tile-500: #238583;
    --tile-300: #8fd3cb;
    --tile-100: #ddf2ef;
    --saffron-700: #7d5200;
    --saffron-500: #e9a93a;
    --saffron-200: #f8dd9e;
    --saffron-100: #fcf0d2;
    --geranium-600: #a83c57;
    --geranium-500: #d45f78;
    --geranium-100: #f9e1e7;
    --aubergine-600: #5a3f7a;
    --aubergine-100: #e9ddf7;

    /* ── ۲. نقش‌های معنایی (کامپوننت‌ها فقط این‌ها را می‌خوانند) ──── */
    --surface: var(--fog-50);
    --surface-lowest: #fffdf8;
    --surface-low: #f9f6fc;
    --surface-container: #efeaf6;
    --surface-high: #e6dff0;
    --surface-highest: #dbd2e8;
    --on-surface: var(--ink);
    --on-surface-variant: var(--ink-soft);
    --outline: #8b81a0;
    --outline-variant: #d3cae2;

    --primary: var(--tile-600);
    --on-primary: #ffffff;
    --primary-container: #237c7a;
    --on-primary-container: #e5f7f4;
    --primary-fixed: var(--tile-100);
    --primary-soft: #e6f4f2;

    --secondary: var(--saffron-700);
    --on-secondary: #ffffff;
    --secondary-container: var(--saffron-200);
    --on-secondary-container: #5c3d00;
    --secondary-soft: var(--saffron-100);

    --tertiary: var(--aubergine-600);
    --tertiary-container: var(--aubergine-100);
    --on-tertiary-container: #4a3566;

    --button-text: #ffffff;
    --on-feel: #2a2040;

    /* معنای سطح‌ها: کاغذ = مال تو · شیشه = حرف دیگران · مه = در حال شکل‌گیری */
    --yours: var(--paper);
    --yours-edge: var(--paper-line);
    --yours-ink: #3a2f2a;
    --others: rgba(255, 255, 255, 0.58);
    --others-edge: rgba(255, 255, 255, 0.85);
    --others-shadow: 0 10px 30px -12px rgba(90, 63, 122, 0.28);
    --forming: var(--fog-100);
    --glass: rgba(245, 242, 250, 0.78);

    /* ── ۳. حس‌ها: هشت رنگ با روشنایی و غلظت برابر ─────────────────
       هیچ‌کدام «بهتر» یا «بدتر» از دیگری نیست؛ رنگ فقط شناسه است. */
    --feel-1: oklch(0.82 0.085 20);
    --feel-2: oklch(0.82 0.085 65);
    --feel-3: oklch(0.82 0.085 105);
    --feel-4: oklch(0.82 0.085 155);
    --feel-5: oklch(0.82 0.085 200);
    --feel-6: oklch(0.82 0.085 245);
    --feel-7: oklch(0.82 0.085 295);
    --feel-8: oklch(0.82 0.085 345);

    /* ── ۴. آسمانِ روز ─ بر اساس «روز استفاده» (مرز ۴ صبح) ───────── */
    --sky-a: #cbe8ec;
    --sky-b: #e3d9f2;
    --sky-glow: #fff2c9;
    --wash-a: #d9f0f3;
    --wash-b: #ece4f6;

    /* ── ۵. حروف ──────────────────────────────────────────────────── */
    --font: "Vazirmatn", "PeydaWeb", Tahoma, system-ui, sans-serif;
    --font-hand: "Playpen Sans Arabic", "Vazirmatn", Tahoma, serif;
    --text-scale: 1;
    --fs-display: calc(34px * var(--text-scale));
    --fs-headline-lg: calc(28px * var(--text-scale));
    --fs-headline-lg-mobile: calc(23px * var(--text-scale));
    --fs-headline-md: calc(19px * var(--text-scale));
    --fs-body-lg: calc(17px * var(--text-scale));
    --fs-body-md: calc(15px * var(--text-scale));
    --fs-body-sm: calc(13px * var(--text-scale));
    --fs-label-md: calc(14px * var(--text-scale));
    --fs-label-sm: calc(12px * var(--text-scale));
    --fs-reading: calc(18px * var(--text-scale));
    --fs-hand: calc(19px * var(--text-scale));
    --fs-hand-lg: calc(26px * var(--text-scale));

    /* ── ۶. فاصله‌ها (مضرب ۴) ─────────────────────────────────────── */
    --space-xs: 0.375rem;
    --space-sm: 0.75rem;
    --space-md: 1.25rem;
    --space-lg: 1.75rem;
    --space-xl: 2.5rem;
    --space-2xl: 3.5rem;
    --gutter: 1rem;
    --margin: 1.25rem;

    /* ── ۷. زبان شکل ─ هر شکل یک معنی دارد ─────────────────────────
       طاق = بازتاب (چیزهایی که تو را به خودت نشان می‌دهند)
       قرص = کنش (کاری که می‌کنی)
       شیشه‌ی نرم = دیگران · کاغذِ گوشه‌کم‌گرد = نوشته‌ی خودت */
    --radius-sm: 0.5rem;
    --radius-md: 0.875rem;
    --radius-card: 1.25rem;
    --radius-sheet: 1.75rem;
    --radius-pill: 9999px;
    --radius-arch: 50% 50% 1.5rem 1.5rem / 42% 42% 1.5rem 1.5rem;
    --radius-paper: 0.375rem;

    --tap-min: 44px;
    --measure: 40rem;
    --reading-measure: 34em;

    /* ── ۸. عمق: سایه‌ی بنفش، نه خاکستری (از ماده‌ی خودِ رنگ) ─────── */
    --shadow-whisper: 0 10px 28px -10px rgba(74, 53, 102, 0.22), 0 2px 6px -2px rgba(74, 53, 102, 0.08);
    --shadow-bar: 0 1px 8px rgba(74, 53, 102, 0.06);
    --shadow-float: 0 18px 40px -14px rgba(42, 32, 64, 0.38), 0 4px 10px -4px rgba(42, 32, 64, 0.16);
    --shadow-paper: 0 1px 0 var(--paper-line), 0 8px 22px -12px rgba(110, 80, 30, 0.35);

    /* ── ۹. حرکت: یک نفس، یک مُهر؛ بقیه فقط پاسخ به لمس ───────────── */
    --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
    --motion: 250ms var(--ease);
    --motion-quick: 140ms var(--ease);
    --breath: 7s ease-in-out infinite;
    --focus-ring: 0 0 0 3px color-mix(in srgb, var(--tile-500) 50%, transparent);

    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);

    color-scheme: light;
}

/* آسمان در ساعت‌های روز. با design-system/js/daypart.js روی <html data-daypart> می‌نشیند */
:root[data-daypart="dawn"] { --sky-a: #fad9c6; --sky-b: #dccdee; --sky-glow: #ffe3b0; --wash-a: #fde6d6; --wash-b: #e8def4; }
:root[data-daypart="day"] { --sky-a: #c9e8ee; --sky-b: #e4daf3; --sky-glow: #fff2c9; --wash-a: #d9f0f3; --wash-b: #ece4f6; }
:root[data-daypart="dusk"] { --sky-a: #f3c6c0; --sky-b: #c6b8e4; --sky-glow: #ffd6a0; --wash-a: #f8dcd6; --wash-b: #ddd1ef; }
:root[data-daypart="night"] { --sky-a: #3d3669; --sky-b: #1f1a3b; --sky-glow: #f6e3a8; --wash-a: #d6d1ec; --wash-b: #c8bfe2; }

/* ── حالت تیره: شب بنفش، نه سیاه؛ کاغذ همچنان گرم می‌ماند ── */
:root[data-theme="dark"] {
    --fog-50: #17111f;
    --fog-100: #211a2e;
    --fog-200: #2c233c;
    --fog-300: #3a3050;
    --paper: #2e2733;
    --paper-shade: #382f3d;
    --paper-line: #4b4150;
    --ink: #f1eaf7;
    --ink-soft: #c9bedb;
    --ink-faint: #9487ad;
    --tile-700: #8fd3cb;
    --tile-600: #6fd0c6;
    --tile-500: #52bdb2;
    --tile-300: #2f7f7b;
    --tile-100: #1f3a3b;
    --saffron-700: #f2c466;
    --saffron-500: #f2be5c;
    --saffron-200: #5a4416;
    --saffron-100: #3b2f17;
    --geranium-600: #f19ab0;
    --geranium-500: #e57a93;
    --geranium-100: #4a2733;
    --aubergine-600: #d2bcf0;
    --aubergine-100: #3c2c55;

    --surface: #17111f;
    --surface-lowest: #120d19;
    --surface-low: #1e1729;
    --surface-container: #261e33;
    --surface-high: #30263f;
    --surface-highest: #3b304d;
    --outline: #9487ad;
    --outline-variant: #4a3f5e;

    --on-primary: #0e2a29;
    --primary-container: #3aa8a0;
    --on-primary-container: #e5f7f4;
    --primary-soft: #1d3436;
    --on-secondary: #2f2000;
    --on-secondary-container: #fbe5ae;
    --on-tertiary-container: #efe3fe;
    --button-text: #07201f;
    --on-feel: #1b1426;

    --yours-ink: #f0e6dc;
    --others: rgba(60, 48, 82, 0.55);
    --others-edge: rgba(190, 170, 230, 0.22);
    --others-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.55);
    --glass: rgba(23, 17, 31, 0.78);

    --feel-1: oklch(0.72 0.085 20);
    --feel-2: oklch(0.72 0.085 65);
    --feel-3: oklch(0.72 0.085 105);
    --feel-4: oklch(0.72 0.085 155);
    --feel-5: oklch(0.72 0.085 200);
    --feel-6: oklch(0.72 0.085 245);
    --feel-7: oklch(0.72 0.085 295);
    --feel-8: oklch(0.72 0.085 345);

    --shadow-whisper: 0 10px 28px -10px rgba(0, 0, 0, 0.55), 0 2px 6px -2px rgba(0, 0, 0, 0.3);
    --shadow-bar: 0 1px 8px rgba(0, 0, 0, 0.35);
    --shadow-float: 0 18px 40px -14px rgba(0, 0, 0, 0.7), 0 4px 10px -4px rgba(0, 0, 0, 0.4);
    --shadow-paper: 0 1px 0 var(--paper-line), 0 8px 22px -12px rgba(0, 0, 0, 0.6);

    color-scheme: dark;
}
:root[data-theme="dark"][data-daypart="dawn"] { --wash-a: #3b2a40; --wash-b: #2a2240; }
:root[data-theme="dark"][data-daypart="day"] { --wash-a: #1f3342; --wash-b: #2a2340; }
:root[data-theme="dark"][data-daypart="dusk"] { --wash-a: #3d2a3b; --wash-b: #2d2142; }
:root[data-theme="dark"][data-daypart="night"] { --wash-a: #241d3d; --wash-b: #1a1430; }

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --fog-50: #17111f;
        --fog-100: #211a2e;
        --fog-200: #2c233c;
        --fog-300: #3a3050;
        --paper: #2e2733;
        --paper-shade: #382f3d;
        --paper-line: #4b4150;
        --ink: #f1eaf7;
        --ink-soft: #c9bedb;
        --ink-faint: #9487ad;
        --tile-700: #8fd3cb;
        --tile-600: #6fd0c6;
        --tile-500: #52bdb2;
        --tile-300: #2f7f7b;
        --tile-100: #1f3a3b;
        --saffron-700: #f2c466;
        --saffron-500: #f2be5c;
        --saffron-200: #5a4416;
        --saffron-100: #3b2f17;
        --geranium-600: #f19ab0;
        --geranium-500: #e57a93;
        --geranium-100: #4a2733;
        --aubergine-600: #d2bcf0;
        --aubergine-100: #3c2c55;
    
        --surface: #17111f;
        --surface-lowest: #120d19;
        --surface-low: #1e1729;
        --surface-container: #261e33;
        --surface-high: #30263f;
        --surface-highest: #3b304d;
        --outline: #9487ad;
        --outline-variant: #4a3f5e;
    
        --on-primary: #0e2a29;
        --primary-container: #3aa8a0;
        --on-primary-container: #e5f7f4;
        --primary-soft: #1d3436;
        --on-secondary: #2f2000;
        --on-secondary-container: #fbe5ae;
        --on-tertiary-container: #efe3fe;
        --button-text: #07201f;
        --on-feel: #1b1426;
    
        --yours-ink: #f0e6dc;
        --others: rgba(60, 48, 82, 0.55);
        --others-edge: rgba(190, 170, 230, 0.22);
        --others-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.55);
        --glass: rgba(23, 17, 31, 0.78);
    
        --feel-1: oklch(0.72 0.085 20);
        --feel-2: oklch(0.72 0.085 65);
        --feel-3: oklch(0.72 0.085 105);
        --feel-4: oklch(0.72 0.085 155);
        --feel-5: oklch(0.72 0.085 200);
        --feel-6: oklch(0.72 0.085 245);
        --feel-7: oklch(0.72 0.085 295);
        --feel-8: oklch(0.72 0.085 345);
    
        --shadow-whisper: 0 10px 28px -10px rgba(0, 0, 0, 0.55), 0 2px 6px -2px rgba(0, 0, 0, 0.3);
        --shadow-bar: 0 1px 8px rgba(0, 0, 0, 0.35);
        --shadow-float: 0 18px 40px -14px rgba(0, 0, 0, 0.7), 0 4px 10px -4px rgba(0, 0, 0, 0.4);
        --shadow-paper: 0 1px 0 var(--paper-line), 0 8px 22px -12px rgba(0, 0, 0, 0.6);
    
        color-scheme: dark;
    }
    :root:not([data-theme="light"])[data-daypart="dawn"] { --wash-a: #3b2a40; --wash-b: #2a2240; }
    :root:not([data-theme="light"])[data-daypart="day"] { --wash-a: #1f3342; --wash-b: #2a2340; }
    :root:not([data-theme="light"])[data-daypart="dusk"] { --wash-a: #3d2a3b; --wash-b: #2d2142; }
    :root:not([data-theme="light"])[data-daypart="night"] { --wash-a: #241d3d; --wash-b: #1a1430; }
}