[data-theme] {
    --body-bg: #f6f6f6;
    --body-color: var(--text-primary);
    --body-selection-bg: #0F0D14;
    --body-selection-color: #ffffff;

    /* borders */
    --border-light: #eee;
    --border-medium: #ddd;
    --border-dark: #ccc;

    /* text color */
    --text-primary: oklch(10% 0 0);
    --text-secondary: oklch(32.3% 0 0);
    --text-white: oklch(100% 0 0);

    --text-muted-900: oklch(38.5% 0 0);       /* #4a4a4a */
    --text-muted-700: oklch(48.2% 0 0);       /* #6b6b6b */
    --text-muted-500: oklch(57.8% 0 0);       /* #8a8a8a */
    --text-muted-300: oklch(67.5% 0 0);       /* #a8a8a8 */

    --star-empty: #d7d7d7;
    --star-fill: #ffb400;

    --status-offline: #969696;
    --status-online: #00BA34;

    /* b&w */
    --black: #000;
    --white: #fff;
    --red: #e65d50;

    --heart-bg: rgba(248, 69, 117, 0.19);
    --heart-color: rgba(248, 69, 117, 0.99);

    --comment-bg: rgba(69, 120, 248, 0.2);
    --comment-color: rgba(69, 120, 248, 0.99);

    --repost-bg: rgba(78, 215, 150, 0.18);
    --repost-color: rgba(78, 215, 150, 0.99);

    /* TODO */
    --gray-25:  #f9f9f9;
    --gray-50:  #f7f7f7;
    --gray-100: #f5f5f5;
    --gray-150: #f3f3f3;
    --gray-175: #f1f1f1;
    --gray-200: #ebebeb;
    --gray-250: #e9e9e9;
    --gray-300: #e6e6e6;

    /* surfaces - вычисляются автоматически */
    --surface-1: var(--bg);
    --surface-2: color-mix(in srgb, var(--bg) 96%, var(--text));
    --surface-3: color-mix(in srgb, var(--bg) 92%, var(--text));

    --surface-gray-1:  #f5f6f7;
    --surface-gray-2: #f1f1f1;
    --surface-gray-3: #ebebeb;

    /* ссылки */
    --href-color: color-mix(n srgb, var(--primary) 75%, #1a1a3a);
    --href-color-hover: color-mix(in srgb, var(--primary) 60%, #1a1a3a);

    --light-primary: color-mix(in srgb, var(--primary) 10%, white);

    --primary-100: color-mix(in srgb, var(--primary) 15%, white);
    --primary-200: color-mix(in srgb, var(--primary) 30%, white);
    --primary-300: color-mix(in srgb, var(--primary) 50%, white);
    --primary-400: var(--primary);
    --primary-500: color-mix(in srgb, var(--primary) 85%, #1a1a1a);
    --primary-600: color-mix(in srgb, var(--primary) 95%, #1a1a1a);

    /* background accents - вычисляются автоматически */
    --bg-accent-1: color-mix(in srgb, var(--bg) 92%, var(--primary));
    --bg-accent-2: color-mix(in srgb, var(--bg) 85%, var(--primary));

    /* heading text берётся из темы */
    --text-heading: var(--ink-heading);

}

:root,
[data-theme^="light"] {
    --bg: #fff;
    --text: #000;
}

[data-theme^="dark"] {
    --bg: #0f172a;
    --text: #e5e7eb;
}

[data-theme="light-default"] {
    --primary: oklch(61.3% 0.2412 278.5);       /* #6b4eff */
    --ink-heading: #2E2A3A;
}

[data-theme="light-green"] {
    --primary: oklch(74.37% 0.134 164.23);       /* #3ec58d */
    --ink-heading: #1f3d2b;
}

[data-theme="light-blue"] {
    --primary: oklch(80% 0.118 211.85);       /* #3fdcff */
    --ink-heading: #1f3d2b;
}

[data-theme="light-gold"] {
    --primary: oklch(75.73% 0.153 78.45);       /* #e3a83c */
    --ink-heading: #1f3d2b;
}

[data-theme="dark-default"] {
    --primary: oklch(27.92% 0.004 220.04);       /* #2c2d2d */
    --ink-heading: #1f3d2b;
}