/* Shared StorySpool theme. Edit the settings in this first group. */
:root {
  --background-color: #bdc5cf;
  --foreground-color: #e2e6ec;
  --detail-color: #d5ab51;
  --important-color: #2563d6;
  --text-color: #24272e;
  --muted-text-color: #47515f;
  --navigation-color: #17191d;
  --inverse-text-color: #f9fafb;
  --success-color: #1d6748;
  --warning-color: #835714;
  --danger-color: #a33f35;
  --rounded-corners: 8px;
  --brand-font-family: "Segoe UI Variable Text", "Segoe UI", ui-sans-serif, system-ui, sans-serif;
  --shadow-color: #17191d;
  --module-shadow: 0 2px 4px color-mix(in srgb, var(--shadow-color) 7%, transparent),
    0 12px 24px color-mix(in srgb, var(--shadow-color) 11%, transparent);

  /* Derived roles keep the rest of the app in sync with the settings above. */
  --bg: var(--background-color);
  --surface: var(--foreground-color);
  --surface-raised: color-mix(in srgb, var(--foreground-color) 60%, white);
  --surface-inset: color-mix(in srgb, var(--foreground-color) 90%, var(--text-color));
  --surface-hover: color-mix(in srgb, var(--foreground-color) 80%, white);
  --surface-strong: var(--navigation-color);
  --text: var(--text-color);
  --muted: var(--muted-text-color);
  --line: color-mix(in srgb, var(--foreground-color) 84%, var(--text-color));
  --control-border: color-mix(in srgb, var(--foreground-color) 72%, var(--muted-text-color));
  --accent: var(--important-color);
  --accent-strong: color-mix(in srgb, var(--important-color) 82%, black);
  --accent-light: color-mix(in srgb, var(--important-color) 96%, white);
  --blue: var(--important-color);
  --blue-wash: color-mix(in srgb, var(--important-color) 9%, var(--foreground-color));
  --blue-border: color-mix(in srgb, var(--important-color) 30%, var(--foreground-color));
  --gold: var(--detail-color);
  --gold-ink: color-mix(in srgb, var(--detail-color) 52%, black);
  --gold-wash: color-mix(in srgb, var(--detail-color) 16%, var(--foreground-color));
  --gold-border: color-mix(in srgb, var(--detail-color) 42%, var(--foreground-color));
  --success: var(--success-color);
  --success-wash: color-mix(in srgb, var(--success-color) 7%, var(--foreground-color));
  --success-border: color-mix(in srgb, var(--success-color) 24%, var(--foreground-color));
  --warning: var(--warning-color);
  --warning-wash: var(--gold-wash);
  --warning-border: var(--gold-border);
  --danger: var(--danger-color);
  --danger-strong: color-mix(in srgb, var(--danger-color) 82%, black);
  --danger-wash: color-mix(in srgb, var(--danger-color) 7%, var(--foreground-color));
  --danger-border: color-mix(in srgb, var(--danger-color) 25%, var(--foreground-color));
  --on-dark: var(--inverse-text-color);
  --nav-muted: color-mix(in srgb, var(--inverse-text-color) 68%, var(--navigation-color));
  --nav-active: color-mix(in srgb, var(--important-color) 20%, var(--navigation-color));
  --nav-raised: color-mix(in srgb, var(--inverse-text-color) 6%, var(--navigation-color));
  --nav-border: color-mix(in srgb, var(--inverse-text-color) 12%, transparent);
  --focus-ring: color-mix(in srgb, var(--important-color) 65%, white);
  --focus-wash: color-mix(in srgb, var(--important-color) 20%, transparent);
  --selection-bg: color-mix(in srgb, var(--important-color) 20%, var(--foreground-color));
  --disabled-text: color-mix(in srgb, var(--muted-text-color) 82%, var(--foreground-color));
  --sticky-surface: color-mix(in srgb, var(--background-color) 96%, transparent);
  --backdrop: color-mix(in srgb, var(--shadow-color) 55%, transparent);
  --surface-highlight: color-mix(in srgb, var(--foreground-color) 30%, white);
  --radius-module: var(--rounded-corners);
  --radius-control: calc(var(--rounded-corners) * .75);
  --radius-small: calc(var(--rounded-corners) * .5);
  --radius-pill: 999px;
  --shadow: var(--module-shadow);
  --section-shadow: var(--module-shadow);
  --control-shadow: 0 1px 2px color-mix(in srgb, var(--shadow-color) 8%, transparent),
    inset 0 1px 0 var(--surface-highlight);
  --dialog-shadow: 0 8px 24px color-mix(in srgb, var(--shadow-color) 12%, transparent),
    0 32px 90px color-mix(in srgb, var(--shadow-color) 25%, transparent);
}