/*
 * Style presets (inc/style-presets.php): the colours and edges of each look, as
 * variables. A widget's own stylesheet says which part uses which one.
 *
 *   bg, fg, muted   the surface, its main text, its quieter text
 *   accent          icons, ticks, links; on-accent is the text drawn on it
 *   border, shadow, radius   the edge of the surface
 *
 * Each pair of text and background reads at 4.5:1 or better (AA); the
 * brand pink (#f00e6d) is 4.2:1 on white, so the deeper #c36 is used.
 * Checked for every widget in tests/test-style-presets.php.
 */
.ekl-preset-soft {
    --ekl-ps-bg: #fff;
    --ekl-ps-fg: #1d2327;
    --ekl-ps-muted: #50575e;
    --ekl-ps-accent: #c36;
    --ekl-ps-on-accent: #fff;
    --ekl-ps-border: 1px solid transparent;
    --ekl-ps-shadow: 0 10px 30px rgb(29 35 39 / 0.1);
    --ekl-ps-radius: 16px;
}

.ekl-preset-outline {
    --ekl-ps-bg: #fff;
    --ekl-ps-fg: #1d2327;
    --ekl-ps-muted: #50575e;
    --ekl-ps-accent: #c36;
    --ekl-ps-on-accent: #fff;
    --ekl-ps-border: 2px solid #1d2327;
    --ekl-ps-shadow: none;
    --ekl-ps-radius: 12px;
}

.ekl-preset-bold {
    --ekl-ps-bg: #c36;
    --ekl-ps-fg: #fff;
    --ekl-ps-muted: #fff;
    --ekl-ps-accent: #fff;
    --ekl-ps-on-accent: #c36;
    --ekl-ps-border: 1px solid transparent;
    --ekl-ps-shadow: 0 10px 30px rgb(204 51 102 / 0.3);
    --ekl-ps-radius: 16px;
}

.ekl-preset-dark {
    --ekl-ps-bg: #1d2327;
    --ekl-ps-fg: #fff;
    --ekl-ps-muted: #dcdcde;
    --ekl-ps-accent: #ff7aa8;
    --ekl-ps-on-accent: #1d2327;
    --ekl-ps-border: 1px solid transparent;
    --ekl-ps-shadow: 0 10px 30px rgb(0 0 0 / 0.3);
    --ekl-ps-radius: 16px;
}

.ekl-preset-minimal {
    --ekl-ps-bg: #f6f7f7;
    --ekl-ps-fg: #1d2327;
    --ekl-ps-muted: #50575e;
    --ekl-ps-accent: #c36;
    --ekl-ps-on-accent: #fff;
    --ekl-ps-border: 0 solid transparent;
    --ekl-ps-shadow: inset 4px 0 0 #c36;
    --ekl-ps-radius: 0;
}

.ekl-preset-accent {
    --ekl-ps-bg: #fff;
    --ekl-ps-fg: #1d2327;
    --ekl-ps-muted: #50575e;
    --ekl-ps-accent: #c36;
    --ekl-ps-on-accent: #fff;
    --ekl-ps-border: 1px solid #dcdcde;
    --ekl-ps-shadow: inset 0 4px 0 #c36, 0 4px 16px rgb(29 35 39 / 0.06);
    --ekl-ps-radius: 8px;
}