/*
 * Color palette shared by the app and the landing page (both layouts load this file).
 * Dark is Tokyo Night (the default); light is Catppuccin Latte, chosen with the theme switch
 * (layouts/_theme, which sets html[data-theme]).
 *
 * The *-rgb channels are for translucent tints: rgba(var(--tn-blue-rgb), 0.12).
 */
:root {
  color-scheme: dark;

  --tn-bg: #1a1b26;
  --tn-bg-deep: #16161e;
  --tn-surface: #1f2335;
  --tn-surface-2: #24283b;
  --tn-border: #292e42;
  --tn-border-strong: #3b4261;
  --tn-fg: #c0caf5;
  --tn-fg-muted: #a9b1d6;
  --tn-comment: #737aa2;
  --tn-blue: #7aa2f7;
  --tn-cyan: #7dcfff;
  --tn-purple: #bb9af7;
  --tn-green: #9ece6a;
  --tn-orange: #ff9e64;
  --tn-red: #f7768e;
  --tn-yellow: #e0af68;
  --tn-on-accent: #16161e;  /* text on blue/purple gradient buttons */

  --tn-bg-rgb: 26, 27, 38;
  --tn-bg-deep-rgb: 22, 22, 30;
  --tn-blue-rgb: 122, 162, 247;
  --tn-cyan-rgb: 125, 207, 255;
  --tn-purple-rgb: 187, 154, 247;
  --tn-green-rgb: 158, 206, 106;
  --tn-red-rgb: 247, 118, 142;
  --tn-yellow-rgb: 224, 175, 104;
  --tn-shadow-rgb: 0, 0, 0;
}

/* Catppuccin Latte */
:root[data-theme="light"] {
  color-scheme: light;

  --tn-bg: #eff1f5;          /* base */
  --tn-bg-deep: #e6e9ef;     /* mantle */
  --tn-surface: #e6e9ef;     /* mantle */
  --tn-surface-2: #dce0e8;   /* crust */
  --tn-border: #ccd0da;      /* surface0 */
  --tn-border-strong: #bcc0cc; /* surface1 */
  --tn-fg: #4c4f69;          /* text */
  --tn-fg-muted: #5c5f77;    /* subtext1 */
  --tn-comment: #6c6f85;     /* subtext0 */
  --tn-blue: #1e66f5;
  --tn-cyan: #04a5e5;        /* sky */
  --tn-purple: #8839ef;      /* mauve */
  --tn-green: #40a02b;
  --tn-orange: #fe640b;      /* peach */
  --tn-red: #d20f39;
  --tn-yellow: #df8e1d;
  --tn-on-accent: #eff1f5;

  --tn-bg-rgb: 239, 241, 245;
  --tn-bg-deep-rgb: 230, 233, 239;
  --tn-blue-rgb: 30, 102, 245;
  --tn-cyan-rgb: 4, 165, 229;
  --tn-purple-rgb: 136, 57, 239;
  --tn-green-rgb: 64, 160, 43;
  --tn-red-rgb: 210, 15, 57;
  --tn-yellow-rgb: 223, 142, 29;
  --tn-shadow-rgb: 76, 79, 105;
}

/* A color per speaker (TranscribesHelper#speaker_class), for their labels on every page. */
.speaker-0 { --speaker: var(--tn-blue); }
.speaker-1 { --speaker: var(--tn-purple); }
.speaker-2 { --speaker: var(--tn-green); }
.speaker-3 { --speaker: var(--tn-orange); }
.speaker-4 { --speaker: var(--tn-cyan); }
.speaker-5 { --speaker: var(--tn-yellow); }

/* Theme switch (layouts/_theme_toggle): shows the theme it switches to. */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid var(--tn-border);
  border-radius: 8px;
  background: transparent;
  color: var(--tn-fg-muted);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  transition: color .15s, border-color .15s, background .15s;
}
.theme-toggle:hover { color: var(--tn-fg); border-color: var(--tn-border-strong); background: rgba(var(--tn-blue-rgb), 0.08); }
.theme-toggle:focus-visible { outline: 2px solid var(--tn-blue); outline-offset: 2px; }
.theme-toggle .theme-icon-dark { display: none; }
:root[data-theme="light"] .theme-toggle .theme-icon-light { display: none; }
:root[data-theme="light"] .theme-toggle .theme-icon-dark { display: inline; }