/* Clean shares Keepsake's composition while changing paper, type and border paint. */
[data-skin="clean"],
.journal-app[data-skin="clean"],
.decks-app[data-skin="clean"] {
  --ss-color-stage: #FBF8F3;
  --ss-color-bg: var(--ss-color-stage);
  --ss-color-shell: var(--ss-color-stage);
  --ss-color-paper: #FFFDF9;
  --ss-color-surface: var(--ss-color-stage);
  --ss-color-panel: var(--ss-color-paper);
  --ss-color-ink: #1E2447;
  --ss-color-ink-soft: #5B6386;
  --ss-color-border: #C9CBDD;
  --ss-color-border-soft: var(--ss-color-border);
  --ss-color-tan-border: var(--ss-color-border);
  --ss-color-tan-border-soft: var(--ss-color-border);
  --ss-color-purple: #7A82B4;
  --ss-color-purple-light: var(--ss-color-purple);
  --ss-color-purple-dark: #626A9B;
  --ss-color-purple-soft: #E4E5F4;
  --ss-color-accent: var(--ss-color-purple);
  --ss-color-accent-strong: var(--ss-color-purple-dark);
  --ss-color-accent-soft: var(--ss-color-purple-soft);
  --ss-color-on-accent: var(--ss-color-ink);
  --ss-color-pink: var(--ss-color-purple-soft);
  --ss-color-pink-strong: var(--ss-color-purple);
  --ss-color-pink-soft: var(--ss-color-purple-soft);
  --ss-color-dock-selected: #e4e5f4;
  --ss-color-close-hover: var(--ss-color-purple-soft);
  --ss-color-green: var(--ss-color-purple);
  --ss-color-green-strong: var(--ss-color-purple-dark);
  --ss-color-green-soft: var(--ss-color-purple-soft);
  --ss-color-shadow: var(--ss-color-ink);
  --ss-color-title: var(--ss-color-paper);
  --ss-color-input: var(--ss-color-paper);
  --ss-color-backdrop: rgba(30, 36, 71, 0.36);

  /* Colour roles (see tokens.css). Clean has no pink: "you" is the deeper blue-lavender, "the app" the pale wash. */
  --ss-role-selected: var(--ss-color-purple-soft);
  --ss-role-selected-edge: var(--ss-color-border);
  --ss-role-selected-soft: var(--ss-color-purple-soft);
  --ss-role-on-selected: var(--ss-color-ink);
  /* The primary fill is the deeper lavender so its paper label reads at AA, hover's 2% lift included. */
  --ss-role-primary: var(--ss-color-purple-dark);
  --ss-role-primary-edge: var(--ss-color-purple-dark);
  --ss-role-star: var(--ss-color-purple);
  --ss-role-highlight: var(--ss-color-purple-soft);
  --ss-role-pressed-glyph: var(--ss-color-purple);
  --ss-role-hover: color-mix(in srgb, var(--ss-color-purple-soft) 50%, var(--ss-color-paper));
  --ss-role-hover-edge: var(--ss-color-purple);
  --ss-role-focus: var(--ss-color-purple-dark);
  --ss-role-progress-done: var(--ss-color-purple);
  --ss-role-progress-current: var(--ss-color-purple-dark);
  --ss-role-tag: var(--ss-color-purple-soft);
  --ss-role-tag-ink: var(--ss-color-ink-soft);
  --ss-role-notice: color-mix(in srgb, var(--ss-color-purple-soft) 60%, var(--ss-color-paper));
  --ss-role-notice-edge: var(--ss-color-purple);
  --ss-role-study-card: var(--ss-color-purple-soft);
  --ss-role-study-card-edge: var(--ss-color-border);
  --ss-role-study-card-ink: var(--ss-color-ink);
  --ss-role-right: var(--ss-color-green-soft);
  --ss-role-right-edge: var(--ss-color-green-strong);
  --ss-role-wrong: color-mix(in srgb, var(--ss-role-destructive) 18%, var(--ss-color-paper)); /* wrong is brick, as every error (house style, 17 Oct) */
  --ss-role-wrong-edge: var(--ss-role-destructive);
  --ss-role-accent: color-mix(in srgb, var(--ss-color-purple) 55%, var(--ss-color-paper));
  /* The answer look (tokens.css): flat, a 1px edge on paper. Clean's right role is lavender, but a right answer is
     green in every skin, so it keeps Keepsake's greens; wrong comes from the wrong role. */
  --ss-answer-right-ink: #4d633d;
  --ss-answer-right-edge: #4d633d;
  --ss-answer-right-paper: #cfe0b8;
  --ss-answer-wrong-ink: var(--ss-role-wrong-edge);
  --ss-answer-wrong-edge: var(--ss-role-wrong-edge);
  --ss-answer-wrong-paper: var(--ss-color-paper);
  --ss-answer-box-edge: var(--ss-color-tan-border-soft);
  --ss-answer-box-paper: var(--ss-color-paper);
  --ss-answer-edge-width: 1px;
  --ss-answer-radius: var(--ss-radius-md);
  --ss-answer-bevel: none;

  --ss-border-weight-outer: 1px;
  --ss-border-weight-inner: 1px;
  --ss-border: 1px solid var(--ss-color-border);
  --ss-border-light: 1px solid var(--ss-color-border);
  --ss-panel-outline: 1px solid var(--ss-color-border);
  --ss-window-outline: var(--ss-color-border);
  --ss-language-tab-frame: var(--ss-color-border);
  --ss-language-tab-shadow: none;
  --ss-tab-raised-frame: var(--ss-color-border);
  --ss-tab-raised-shadow: none;
  --ss-tab-raised-shadow-active: none;

  --ss-shadow: none;
  --ss-shadow-soft: none;
  --ss-shadow-lifted: none;
  --ss-shadow-hard: none;
  --ss-panel-shadow: none;
  --ss-panel-shadow-soft: none;
  --ss-control-shadow-soft: none;
  --ss-titlebar-shadow: none;
  --ss-window-bevel: none;
  --ss-panel-bevel: none;
  --ss-field-bevel: none;
  --ss-button-shadow-hard: none;
  --ss-button-shadow-secondary: none;
  --ss-button-shadow-pressed: none;
  --ui-press-shadow: none;

  --ss-radius-panel: 5px;
  --ss-radius-button: 1px;

  --ss-font-display: "Charis SIL", "Iowan Old Style", "Charter", "Palatino", Georgia, var(--ss-font-jp);
  --ss-font-pixel: var(--ss-font-ui);
  --ss-font-retro: var(--ss-font-ui);
  --ss-font-chrome: var(--ss-font-ui);
  --ss-font-window-title: var(--ss-font-ui);
  --ss-font-ui: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ss-font-reading: "Charis SIL", "Iowan Old Style", "Charter", "Palatino", Georgia, var(--ss-font-jp);
  --ss-font-body: var(--ss-font-ui);
  --ss-font-jp: "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", serif;

  --ui-selected-background: var(--ss-role-selected);
  --ui-selected-color: var(--ss-color-ink);
  --ui-selected-border: var(--ss-role-selected-edge);
  --ui-selected-shadow: none;
  --ui-primary-background: var(--ss-role-primary);
  --ui-primary-color: var(--ss-color-paper);
  --ui-primary-border: var(--ss-role-primary-edge);
  /* A disabled control (primitives.css): muted ink on paper in a soft frame. */
  --ss-disabled-face: var(--ss-color-paper);
  --ss-disabled-ink: var(--ss-color-ink-soft);
  --ss-disabled-outline: var(--ss-color-border-soft);
  --ui-primary-shadow: none;
}

[data-skin="clean"] .ui-window {
  /* Keep Keepsake's 6px frame footprint so the client bounds stay identical;
     the window itself uses a single flat 1px rule instead of a bevel rim. */
  border: 6px solid transparent;
  outline: 1px solid var(--ss-color-border);
  outline-offset: -1px;
  border-radius: 0;
  background: var(--ss-color-shell);
  box-shadow: none;
}

[data-skin="clean"] .ui-titlebar,
[data-skin="clean"] .ui-workspace-window:not(.is-focused) .ui-workspace-titlebar {
  color: var(--ss-color-paper);
  background: var(--ss-color-purple);
  box-shadow: none;
  font-family: var(--ss-font-ui);
  text-shadow: none;
}

[data-skin="clean"] .ui-workspace-controls button {
  border-color: var(--ss-color-border);
  color: var(--ss-color-ink);
  box-shadow: none;
}

[data-skin="clean"] .ui-workspace-controls button[data-workspace-action="close"] {
  color: var(--ss-color-ink);
  background: var(--ss-color-purple-soft);
}

[data-skin="clean"] .ui-workspace-controls button[data-workspace-action="close"]:hover:not(:disabled) {
  background: var(--ss-color-close-hover);
}

[data-skin="clean"] .ui-workspace-titlebar:focus-visible {
  outline-color: var(--ss-color-accent);
}

[data-skin="clean"] .ui-settings-row__icon {
  color: var(--ss-color-purple-dark);
}

[data-skin="clean"] .ui-shortcut-badge {
  border-color: var(--ss-color-border);
  color: var(--ss-color-purple-dark);
  box-shadow: none;
}