/* colors.css — брендбук + темы + палитры для кода */

/* === Dark theme (по умолчанию, палитра 3) === */
:root {
    /* === Base === */
    --brand-bg: #21232f;
    --brand-fg: #ffffff;

    /* === Neutrals === */
    --neutral-100: #f6f6f7;
    --neutral-200: #eaeaeb;
    --neutral-300: #d1d1d3;
    --neutral-500: #7c7b80;
    --neutral-700: #505058;
    --neutral-800: #2a2c37;

    /* === Palettes === */
    --green-600: #00bd79;
    --green-500: #00e680;
    --green-400: #6effa1;
    --green-300: #b2ffbf;
    --green-200: #d2ffe2;
    --purple-600: #9a52ff;
    --purple-500: #9770ff;
    --purple-400: #ac8fff;
    --purple-300: #d3b3ff;
    --purple-200: #e5d9ff;
    --red-600: #ff5261;
    --red-500: #ff696f;
    --red-400: #ff8084;
    --red-300: #ffb1be;
    --red-200: #ffd6d9;
    --yellow-600: #ffb600;
    --yellow-500: #ffda00;
    --yellow-400: #ffff7f;
    --yellow-300: #ffffb3;
    --yellow-200: #ffffd7;
    --blue-600: #12bdff;
    --blue-500: #2addff;
    --blue-400: #7bf0ff;
    --blue-300: #aff7ff;
    --blue-200: #d6faff;
    --pink-600: #ff83ff;
    --pink-500: #ffa9ff;
    --pink-400: #ffc0ff;
    --pink-300: #ffd8ff;
    --pink-200: #ffebff;

    /* === Illustration === */
    --ill-01: #21232f;
    --ill-02: #1c1847;
    --ill-03: #321f68;
    --ill-04: #512a78;
    --ill-05: #272a40;
    --ill-06: #5c5789;
    --ill-07: #2d2740;
    --ill-08: #2d1847;
    --ill-09: #4e1f68;
    --ill-10: #782a74;
    --ill-11: #6b528b;
    --ill-12: #705a89;
    --ill-13: #00e680;
    --ill-14: #6effa1;
    --ill-15: #ff83ff;
    --ill-16: #4f63a6;
    --ill-17: #54528b;
    --ill-18: #5eafb3;
    --ill-19: #ffa9ff;
    --ill-20: #ffd8ff;
    --ill-21: #ffebff;

    /* === Code (dark) — палитра 3 === */
    --code-bg: #1b1d27;
    --code-fg: #f6f6f7;
    --code-border: #2a2c37;
    --code-muted: var(--neutral-500);
    --code-inline-bg: #2a2c37;

    --code-keyword: #c792ea; /* фиолетовый */
    --code-function: #82aaff; /* голубой */
    --code-string: #c3e88d; /* зелёный */
    --code-number: #ffcb6b; /* жёлтый */
    --code-constant: #f7768e; /* розовый */
    --code-operator: #89ddff; /* голубой ярче */
    --code-punctuation: #89ddff;
    --code-comment: #676e95;
    --code-class: #ffcb6b;
    --code-attr: #c792ea;
    --code-tag: #f07178;
    --code-error: var(--red-500);
    --code-warning: var(--yellow-500);
    --code-selection: rgba(137, 221, 255, 0.2);
}

/* === Light theme (палитра 1) === */
[data-theme="light"] {
    /* === Base === */
    --brand-bg: #ffffff;
    --brand-fg: #21232f;

    /* === Neutrals === */
    --neutral-100: #ffffff;
    --neutral-200: #f6f6f7;
    --neutral-300: #eaeaeb;
    --neutral-500: #7c7b80;
    --neutral-700: #505058;
    --neutral-800: #2a2c37;

    /* === Palettes — те же === */

    /* === Code (light) — палитра 1 === */
    --code-bg: #f6f8fa;
    --code-fg: #2a2c37;
    --code-border: #eaeaeb;
    --code-muted: #6a737d;
    --code-inline-bg: #eaeaeb;

    --code-keyword: #d73a49; /* красный */
    --code-function: #6f42c1; /* фиолетовый */
    --code-string: #032f62; /* тёмно-синий */
    --code-number: #005cc5; /* синий */
    --code-constant: #e36209; /* оранжевый */
    --code-operator: #24292e;
    --code-punctuation: #24292e;
    --code-comment: #6a737d;
    --code-class: #005cc5;
    --code-attr: #6f42c1;
    --code-tag: #22863a;
    --code-error: var(--red-600);
    --code-warning: var(--yellow-600);
    --code-selection: rgba(3, 47, 98, 0.18);
}

/* === Utility === */
.bg-brand {
    background-color: var(--brand-bg);
}
.text-brand-on {
    color: var(--brand-fg);
}

.bg-neutral-100 {
    background-color: var(--neutral-100);
}
.bg-neutral-200 {
    background-color: var(--neutral-200);
}
.bg-neutral-300 {
    background-color: var(--neutral-300);
}
.text-neutral-500 {
    color: var(--neutral-500);
}
.text-neutral-700 {
    color: var(--neutral-700);
}
.text-neutral-800 {
    color: var(--neutral-800);
}

.bg-green-500 {
    background-color: var(--green-500);
}
.bg-green-300 {
    background-color: var(--green-300);
}
.bg-purple-500 {
    background-color: var(--purple-500);
}
.bg-red-500 {
    background-color: var(--red-500);
}
.bg-yellow-500 {
    background-color: var(--yellow-500);
}
.bg-blue-500 {
    background-color: var(--blue-500);
}
.bg-pink-500 {
    background-color: var(--pink-500);
}

.on-brand {
    color: var(--brand-fg);
}
.on-light {
    color: var(--neutral-800);
}
.on-dark {
    color: #ffffff;
}