/* public/app/css/page-themes.css
 * Synopsis: Tokens page par thème.
 * Objectif: Bandes dérivées du thème (fusion totale).
 */

html[data-vok-theme="papier"] {
    --paper: #f2efdf;
    --ink: #17150f;
    --muted: #69665b;
    --line: rgba(23, 21, 15, .22);
    --acid: #c5d47a;
    --signal: #c47862;
    --cold: #a9c9c4;
    --band-proof: color-mix(in srgb, var(--cold) 30%, var(--paper));
    --band-proof-ink: var(--ink);
    --band-future: color-mix(in srgb, var(--signal) 16%, var(--paper));
    --band-future-ink: var(--ink);
    --band-docs: color-mix(in srgb, var(--acid) 14%, var(--paper));
    --band-docs-ink: var(--ink);
    --band-foot: color-mix(in srgb, var(--acid) 36%, var(--paper));
    --band-foot-ink: var(--ink);
    --cta: var(--acid);
}

html[data-vok-theme="sable"] {
    --paper: #e8dcc8;
    --ink: #2a2218;
    --muted: #6f6254;
    --line: rgba(42, 34, 24, .22);
    --acid: #d4c896;
    --signal: #b56a50;
    --cold: #9cb8a8;
    --band-proof: color-mix(in srgb, var(--cold) 28%, var(--paper));
    --band-proof-ink: var(--ink);
    --band-future: color-mix(in srgb, var(--signal) 16%, var(--paper));
    --band-future-ink: var(--ink);
    --band-docs: color-mix(in srgb, var(--acid) 16%, var(--paper));
    --band-docs-ink: var(--ink);
    --band-foot: color-mix(in srgb, var(--acid) 38%, var(--paper));
    --band-foot-ink: var(--ink);
    --cta: var(--acid);
}

html[data-vok-theme="ciel"] {
    --paper: #dce8f2;
    --ink: #14202e;
    --muted: #4f6275;
    --line: rgba(20, 32, 46, .2);
    --acid: #d0c478;
    --signal: #c47359;
    --cold: #8ecae6;
    --band-proof: color-mix(in srgb, var(--cold) 26%, var(--paper));
    --band-proof-ink: var(--ink);
    --band-future: color-mix(in srgb, var(--signal) 14%, var(--paper));
    --band-future-ink: var(--ink);
    --band-docs: color-mix(in srgb, var(--acid) 14%, var(--paper));
    --band-docs-ink: var(--ink);
    --band-foot: color-mix(in srgb, var(--cold) 34%, var(--paper));
    --band-foot-ink: var(--ink);
    --cta: var(--acid);
}

html[data-vok-theme="sauge"] {
    --paper: #dfe8df;
    --ink: #1a261c;
    --muted: #4f5f52;
    --line: rgba(26, 38, 28, .2);
    --acid: #c2cd8e;
    --signal: #b76650;
    --cold: #a8c4b0;
    --band-proof: color-mix(in srgb, var(--cold) 28%, var(--paper));
    --band-proof-ink: var(--ink);
    --band-future: color-mix(in srgb, var(--signal) 14%, var(--paper));
    --band-future-ink: var(--ink);
    --band-docs: color-mix(in srgb, var(--acid) 14%, var(--paper));
    --band-docs-ink: var(--ink);
    --band-foot: color-mix(in srgb, var(--acid) 36%, var(--paper));
    --band-foot-ink: var(--ink);
    --cta: var(--acid);
}

html[data-vok-theme="noir"] {
    --paper: #1e2128;
    --ink: #f0ece4;
    --muted: #a8a4b0;
    --line: rgba(240, 236, 228, .16);
    --acid: #b8c86a;
    --signal: #c48779;
    --cold: #82aba5;
    --band-proof: color-mix(in srgb, var(--cold) 14%, var(--paper));
    --band-proof-ink: var(--ink);
    --band-future: color-mix(in srgb, var(--signal) 12%, var(--paper));
    --band-future-ink: var(--ink);
    --band-docs: color-mix(in srgb, var(--acid) 9%, var(--paper));
    --band-docs-ink: var(--ink);
    --band-foot: color-mix(in srgb, var(--acid) 20%, var(--paper));
    --band-foot-ink: var(--ink);
    --cta: var(--acid);
}