:root[data-ui-style="soft-brutal"] {
  color-scheme: light;
  --bg: #f2f4ef;
  --surface: #fffef9;
  --surface-soft: #e9eeea;
  --line: #cbd4cf;
  --line-strong: #2d3634;
  --text: #222827;
  --muted: #6d7774;
  --mint: #4f9b6f;
  --mint-soft: #dcefe2;
  --blue: #557ab4;
  --blue-soft: #e1e9f5;
  --coral: #e87858;
  --coral-soft: #f8e1d8;
  --amber: #b87d26;
  --amber-soft: #f6e9c9;
  --red: #be5862;
  --red-soft: #f5dfe1;
  --accent: var(--coral);
  --accent-strong: var(--coral);
  --accent-soft: var(--coral-soft);
  --success: var(--mint);
  --danger: var(--red);
  --warning: var(--amber);
  --shadow: 4px 4px 0 rgba(34, 40, 39, .12);
  --radius: 6px;
}

:root[data-ui-style="soft-brutal"][data-theme="dark"] {
  color-scheme: dark;
  --bg: #181a20;
  --surface: #22242b;
  --surface-soft: #30343d;
  --line: #3b3e48;
  --line-strong: #747985;
  --text: #f3f3f5;
  --muted: #a5a8b2;
  --mint: #74c99b;
  --mint-soft: #263d32;
  --blue: #8aaef0;
  --blue-soft: #2d374c;
  --coral: #f08b72;
  --coral-soft: #4b332f;
  --amber: #e1b65d;
  --amber-soft: #433a27;
  --red: #e6848d;
  --red-soft: #493037;
  --accent: #f08b72;
  --accent-strong: #ffa088;
  --accent-soft: #4b332f;
  --success: #74c99b;
  --danger: #e6848d;
  --warning: #e1b65d;
  --shadow: 4px 4px 0 rgba(0, 0, 0, .34);
}

:root[data-ui-style="soft-brutal"] body {
  background: var(--bg);
}

:root[data-ui-style="soft-brutal"] .eyebrow {
  color: var(--mint);
  letter-spacing: 0;
}

:root[data-ui-style="soft-brutal"] .title-targets span,
:root[data-ui-style="soft-brutal"] .meta-chip,
:root[data-ui-style="soft-brutal"] .segmented,
:root[data-ui-style="soft-brutal"] .panel,
:root[data-ui-style="soft-brutal"] .stat,
:root[data-ui-style="soft-brutal"] .accounts,
:root[data-ui-style="soft-brutal"] .session-guide,
:root[data-ui-style="soft-brutal"] .notice,
:root[data-ui-style="soft-brutal"] .issues {
  border-color: var(--line-strong);
  border-radius: 6px;
}

:root[data-ui-style="soft-brutal"] .title-targets span,
:root[data-ui-style="soft-brutal"] .meta-chip,
:root[data-ui-style="soft-brutal"] .segmented,
:root[data-ui-style="soft-brutal"] .stat,
:root[data-ui-style="soft-brutal"] .accounts {
  background: var(--surface);
}

:root[data-ui-style="soft-brutal"] .panel {
  border-width: 1.5px;
  box-shadow: var(--shadow);
}

:root[data-ui-style="soft-brutal"] .panel-head {
  border-bottom-color: var(--line);
}

:root[data-ui-style="soft-brutal"] .segmented {
  padding: 3px;
  box-shadow: 3px 3px 0 color-mix(in srgb, var(--line-strong) 12%, transparent);
}

:root[data-ui-style="soft-brutal"] .segmented button {
  border: 1px solid transparent;
  border-radius: 4px;
}

:root[data-ui-style="soft-brutal"] .segmented button.active {
  border-color: var(--line-strong);
  background: var(--accent-soft);
  color: var(--accent);
  box-shadow: 2px 2px 0 color-mix(in srgb, var(--accent) 20%, transparent);
}

:root[data-ui-style="soft-brutal"] .button {
  border: 1px solid var(--line-strong);
  border-radius: 5px;
}

:root[data-ui-style="soft-brutal"] .button-primary {
  background: var(--accent);
  box-shadow: 3px 3px 0 color-mix(in srgb, var(--line-strong) 35%, transparent);
}

:root[data-ui-style="soft-brutal"] .button-secondary,
:root[data-ui-style="soft-brutal"] .button-ghost {
  border-color: var(--line-strong);
  background: var(--surface);
  color: var(--text);
}

:root[data-ui-style="soft-brutal"] .button:hover {
  transform: translate(-1px, -1px);
  box-shadow: 3px 3px 0 color-mix(in srgb, var(--line-strong) 15%, transparent);
}

:root[data-ui-style="soft-brutal"] textarea {
  border-color: var(--line-strong);
  border-radius: 5px;
  background: var(--surface-soft);
  color: var(--text);
}

:root[data-ui-style="soft-brutal"] textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent);
}

:root[data-ui-style="soft-brutal"] .session-guide {
  border-left: 5px solid var(--accent);
  background: var(--accent-soft);
  color: var(--text);
}

:root[data-ui-style="soft-brutal"] .session-guide strong,
:root[data-ui-style="soft-brutal"] .session-guide p,
:root[data-ui-style="soft-brutal"] .session-guide a {
  color: var(--text);
}

:root[data-ui-style="soft-brutal"] .stat {
  position: relative;
  overflow: hidden;
  box-shadow: 2px 2px 0 color-mix(in srgb, var(--line-strong) 11%, transparent);
}

:root[data-ui-style="soft-brutal"] .stat::before {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 4px;
  background: var(--stat-tone, var(--accent));
  content: "";
}

:root[data-ui-style="soft-brutal"] .stat:nth-child(2) { --stat-tone: var(--blue); }
:root[data-ui-style="soft-brutal"] .stat:nth-child(3) { --stat-tone: var(--mint); }

:root[data-ui-style="soft-brutal"] th {
  background: var(--surface-soft);
  color: var(--text);
}

:root[data-ui-style="soft-brutal"] th,
:root[data-ui-style="soft-brutal"] td {
  border-bottom-color: var(--line);
}

:root[data-ui-style="soft-brutal"] .notice {
  background: color-mix(in srgb, var(--warning) 13%, var(--surface));
}

:root[data-ui-style="soft-brutal"] .issues {
  background: color-mix(in srgb, var(--danger) 13%, var(--surface));
}