/**
 * tarane-social — Design Tokens
 * تم مدرن شبکه اجتماعی «ترانه‌سراها» — DNA نئون صدف (cyan #00d4ff / pink #ff006e)
 * روشن = پیش‌فرض، تاریک با body.dark-mode یا html[data-theme="dark"]
 */

:root {
    /* ── برند ── */
    --ts-cyan: #00d4ff;
    --ts-pink: #ff006e;
    --ts-violet: #7c3aed;
    --ts-grad: linear-gradient(135deg, #00d4ff 0%, #7c3aed 52%, #ff006e 100%);
    --ts-grad-soft: linear-gradient(135deg, rgba(0,212,255,.14), rgba(255,0,110,.14));

    /* ── رمپ کامل primary (سازگاری با صفحات CMS) ── */
    --primary-50: #e8fbff; --primary-100: #d0f4ff; --primary-200: #a5e9ff;
    --primary-300: #6fe3ff; --primary-400: #33cdff; --primary-500: #00b8e6;
    --primary-600: #0090b8; --primary-700: #0679a8; --primary-800: #0a5f85; --primary-900: #0c4a6e;

    /* ── رمپ کامل secondary (بنفش — مکمل گرادیان‌های صفحات) ── */
    --secondary-50: #f6f2ff; --secondary-100: #ede5ff; --secondary-200: #dccdff;
    --secondary-300: #c4a9ff; --secondary-400: #a882fb; --secondary-500: #7c3aed;
    --secondary-600: #6d2fe0; --secondary-700: #5b21b6; --secondary-800: #4a1d96; --secondary-900: #3b1678;

    /* ── سطح‌ها (روشن) ── */
    --bg: #eef1f6;
    --w: #ffffff;
    --w2: #f7f9fc;
    --b: #e3e8f0;
    --b2: #d4dbe7;
    --t: #151a24;
    --ts: #5c6472;
    --tt: #8a92a3;
    --sb: rgba(0, 212, 255, .10);
    --st: #0679a8;

    /* ── برند سیستمی ── */
    --p: #00b8e6;
    --pd: #0090b8;
    --accent: #00b8e6;
    --primary: #00b8e6;
    --d: #ef2b52;
    --s: #14b866;
    --warn: #e58f0b;

    /* ── شعاع و سایه ── */
    --r: 14px;
    --rl: 20px;
    --sh: 0 1px 2px rgba(16,24,40,.05), 0 4px 16px rgba(16,24,40,.06);
    --sh-lg: 0 8px 32px rgba(16,24,40,.12);
    --ctx-shadow: 0 12px 40px rgba(16,24,40,.18);

    /* ── فید ── */
    --ts-card-radius: 16px;
    --ts-header-h: 64px;   /* T17: هم‌ارتفاع واقعی هدر ثابت (4rem) */
    --ts-feed-w: 640px;   /* T33: فید خواناتر در دسکتاپ */
    --ts-side-w: 320px;   /* T33: تناسب بهتر با فید عریض‌تر */

    /* ── گرای‌های اسکلت ── */
    --gray-50: #f7f9fc; --gray-100: #eef1f6; --gray-200: #e3e8f0; --gray-300: #d4dbe7;
    --gray-400: #aab3c2; --gray-500: #8a92a3; --gray-600: #5c6472; --gray-700: #3a4152;
    --gray-800: #222836; --gray-900: #151a24;
    --success: #14b866; --danger: #ef2b52; --warning: #e58f0b; --info: #00b8e6;
}

/* ── تاریک ── */
body.dark-mode,
html[data-theme="dark"] body {
    --bg: #0a0a14;
    --w: #12121f;
    --w2: #171728;
    --b: rgba(255, 255, 255, .08);
    --b2: rgba(255, 255, 255, .14);
    --t: #f2f4fa;
    --ts: #9aa0b4;
    --tt: #666d80;
    --sb: rgba(0, 212, 255, .12);
    --st: #5fdcff;

    --p: #00d4ff;
    --pd: #33ddff;
    --accent: #00d4ff;
    --primary: #00d4ff;

    --sh: 0 1px 2px rgba(0,0,0,.4), 0 4px 20px rgba(0,0,0,.35);
    --sh-lg: 0 10px 44px rgba(0,0,0,.55);
    --ctx-shadow: 0 16px 56px rgba(0,0,0,.6);

    --gray-50: #12121f; --gray-100: #171728; --gray-200: #1e1e33; --gray-300: #2a2a44;
    --gray-400: #3d3d5c; --gray-500: #666d80; --gray-600: #9aa0b4; --gray-700: #c3c8d9;
    --gray-800: #e6e9f2; --gray-900: #f2f4fa;
}