/* Exact Rio Archive palette from the owner's tiny_desk_ui (1).html.
   Component aliases resolve to these source colors; no alternate palette. */
@font-face {
  font-family: 'Fraunces';
  src: url('/fonts/fraunces-latin.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Fraunces';
  src: url('/fonts/fraunces-italic-latin.woff2') format('woff2');
  font-weight: 400 600;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('/fonts/jetbrains-mono-latin.woff2') format('woff2');
  font-weight: 400 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('/fonts/plus-jakarta-sans-latin.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
:root, [data-theme="light"] {
  color-scheme: light;
  --bg-canvas: #F5EFE6;
  --bg-surface: #EAE0D2;
  --bg-elevated: #FFFDF9;
  --bg-dark-section: #2C4030;
  --text-primary: #1E1916;
  --text-secondary: #5A3E31;
  --text-muted: #8C7A6B;
  --text-on-primary: #F5EFE6;
  --brand-primary: #B55435;
  --brand-primary-hover: #9A4327;
  --brand-secondary: #768265;
  --brand-secondary-hover: #5F6A50;
  --brand-accent: #C89D54;
  --status-success: #4E6E4E;
  --status-warning: #C89D54;
  --status-danger: #9E332E;
  --status-info: #4A6274;
  --border-subtle: #DCD0C0;
  --border-strong: #B8A692;
  --shadow-warm-sm: 0 2px 10px rgba(90, 62, 49, 0.07);
  --shadow-warm-md: 0 10px 30px rgba(30, 25, 22, 0.11);
  --shadow-warm-lg: 0 20px 40px rgba(30, 25, 22, 0.16);
  --shadow-sm: var(--shadow-warm-sm);
  --shadow-md: var(--shadow-warm-md);
  --shadow-lg: var(--shadow-warm-lg);
  /* Reference button classes retain cream text in light and dark modes. */
  --action-ink: #F5EFE6;
  --quiet-text: var(--text-muted);
  --accent-readable: var(--brand-primary);
  --primary-soft: rgba(181, 84, 53, 0.12);
  --secondary-soft: rgba(118, 130, 101, 0.16);
  --secondary-ink: var(--brand-secondary);
  --gold-soft: rgba(200, 157, 84, 0.2);
  --success-text: var(--status-success);
  --danger-text: var(--status-danger);
  --danger-soft: rgba(158, 51, 46, 0.12);
  --info-text: var(--status-info);
  --control-border: var(--border-strong);
  --header-surface: var(--bg-canvas);
  --backdrop: rgb(30 25 22 / 65%);
  --media-surface: #181412;
  --media-ink: #F5EFE6;
  --media-scrim: rgb(30 25 22 / 90%);
  --media-border: rgb(200 157 84 / 30%);
  --footer-text: #F5EFE6;
  --footer-muted: #EAE0D2;
  --footer-border: rgb(200 157 84 / 20%);
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 16px;
  --display: 'Fraunces', Georgia, serif;
  --body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', sans-serif;
  --mono: 'JetBrains Mono', monospace;
  --transition-surface: .28s cubic-bezier(.4, 0, .2, 1);
  --transition-color: .2s cubic-bezier(.4, 0, .2, 1);

  /* Shared component aliases: one source of color across the existing app. */
  --bg: var(--bg-canvas);
  --paper: var(--bg-elevated);
  --soft: var(--bg-surface);
  --text: var(--text-primary);
  --muted: var(--text-secondary);
  --border: var(--border-subtle);
  --accent: var(--brand-primary);
  --accent-ink: var(--action-ink);
  --accent-text: var(--accent-readable);
  --accent-soft: var(--primary-soft);
  --focus: var(--brand-primary);
  --control: var(--brand-primary);
  --outline: var(--control-border);
}
[data-theme='dark'] {
  color-scheme: dark;
  --bg-canvas: #181412;
  --bg-surface: #241E1B;
  --bg-elevated: #2E2622;
  --bg-dark-section: #152218;
  --text-primary: #F2ECE1;
  --text-secondary: #C4B5A5;
  --text-muted: #857568;
  --text-on-primary: #181412;
  --brand-primary: #CC6645;
  --brand-primary-hover: #DF7654;
  --brand-secondary: #8C997A;
  --brand-secondary-hover: #A1B08E;
  --brand-accent: #D9AF62;
  --status-success: #678E67;
  --status-warning: #D9AF62;
  --status-danger: #C44943;
  --status-info: #68879E;
  --border-subtle: #382E29;
  --border-strong: #52443C;
  --shadow-warm-sm: 0 2px 10px rgba(0, 0, 0, 0.3);
  --shadow-warm-md: 0 10px 30px rgba(0, 0, 0, 0.45);
  --shadow-warm-lg: 0 20px 40px rgba(0, 0, 0, 0.6);
  --backdrop: rgb(24 20 18 / 78%);
}