gerbeur/src/themes/smooth.css

/* ══════════════════════════════════════════════════════════════════════
   Smooth theme — clean, modern, Saira typeface
   Palette: Prussian Blue · Deep Teal · Jasmine · Brick Ember · Blood Red
   Applied when data-style is absent or "smooth".
   ══════════════════════════════════════════════════════════════════════ */

/* ── Dark variant (default) ───────────────────────────────────────── */
:root,
:root[data-style="smooth"] {
  /* Global font defaults — other themes override --font-body; App.css styles
     consume these variables rather than hard-coding font names. */
  --font-body: "Saira", sans-serif;
  --font-mono: monospace;

  font-family: var(--font-body);
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  line-height: 1.5;

  color-scheme: light dark;

  /* Text */
  --color-text: #eef0f3;
  --color-text-secondary: #8aaabb;
  --color-text-muted: #506878;
  --color-on-accent: #001427; /* Prussian Blue on Jasmine */

  /* Surfaces */
  --color-bg: #001427; /* Prussian Blue */
  --color-surface: #0a1f35;

  /* Borders */
  --color-border: transparent;
  --color-border-subtle: rgba(112, 141, 129, 0.2); /* Deep Teal tint */

  /* Accent */
  --color-accent: #f4d58d; /* Jasmine */
  --color-accent-hover: #d4aa5a;

  /* Links */
  --color-link: #f4d58d;
  --color-link-hover: #d4aa5a;

  /* Danger */
  --color-danger: #bf0603; /* Brick Ember */
  --color-danger-bg: #220404;
  --color-danger-hover: #8d0801; /* Blood Red */

  /* Success */
  --color-success: #708d81; /* Deep Teal */
  --color-success-bg: #0d2820;
  --color-success-hover: #8aaa9a;

  /* Overlays */
  --color-overlay: rgba(0, 10, 20, 0.55);
  --color-header-user-bg: rgba(244, 213, 141, 0.06);
  --color-header-user-bg-hover: rgba(244, 213, 141, 0.12);

  /* Misc */
  --color-option-bg: #0d2340;
  --color-option-border: #001427;

  /* Service brand colors (fixed, not theme-dependent). `on-brand` is the
     foreground for text sitting on any of these — also fixed, so the contrast
     never flips with the theme's text colour. */
  --color-youtube: #c00;
  --color-youtube-hover: #f00;
  --color-bandcamp: #1da0c3;
  --color-bandcamp-hover: #25c8f0;
  --color-soundcloud: #f50;
  --color-soundcloud-hover: #f73;
  --color-on-brand: #fff;
}

/* ── Light via system preference (auto color-scheme) ──────────────── */
@media (prefers-color-scheme: light) {
  :root:not([data-style]),
  :root[data-style="smooth"]:not([data-color-scheme]) {
    --color-text: #001427; /* Prussian Blue */
    --color-text-secondary: #3a5a70;
    --color-text-muted: #6a8898;
    --color-on-accent: #ffffff;

    --color-bg: #f0f4f8;
    --color-surface: #ffffff;

    --color-border: transparent;
    --color-border-subtle: rgba(0, 20, 39, 0.12);

    --color-accent: #bf0603; /* Brick Ember — pops on light bg */
    --color-accent-hover: #8d0801;

    --color-link: #bf0603;
    --color-link-hover: #8d0801;

    --color-danger: #bf0603;
    --color-danger-bg: #fde8e8;
    --color-danger-hover: #8d0801;

    --color-success: #4a6e60; /* darkened Deep Teal */
    --color-success-bg: #e0ede8;
    --color-success-hover: #2e5448;

    --color-overlay: rgba(0, 10, 20, 0.4);
    --color-header-user-bg: rgba(0, 20, 39, 0.07);
    --color-header-user-bg-hover: rgba(0, 20, 39, 0.13);

    --color-option-bg: #f5f7fa;
    --color-option-border: #dde3ea;
  }
}

/* ── Manual dark override ─────────────────────────────────────────── */
:root:not([data-style])[data-color-scheme="dark"],
:root[data-style="smooth"][data-color-scheme="dark"] {
  color-scheme: dark;
  --color-text: #eef0f3;
  --color-text-secondary: #8aaabb;
  --color-text-muted: #506878;
  --color-on-accent: #001427;
  --color-bg: #001427;
  --color-surface: #0a1f35;
  --color-border: transparent;
  --color-border-subtle: rgba(112, 141, 129, 0.2);
  --color-accent: #f4d58d;
  --color-accent-hover: #d4aa5a;
  --color-link: #f4d58d;
  --color-link-hover: #d4aa5a;
  --color-danger: #bf0603;
  --color-danger-bg: #220404;
  --color-danger-hover: #8d0801;
  --color-success: #708d81;
  --color-success-bg: #0d2820;
  --color-success-hover: #8aaa9a;
  --color-overlay: rgba(0, 10, 20, 0.55);
  --color-header-user-bg: rgba(244, 213, 141, 0.06);
  --color-header-user-bg-hover: rgba(244, 213, 141, 0.12);
  --color-option-bg: #0d2340;
  --color-option-border: #001427;
}

/* ── Manual light override ────────────────────────────────────────── */
:root:not([data-style])[data-color-scheme="light"],
:root[data-style="smooth"][data-color-scheme="light"] {
  color-scheme: light;
  --color-text: #001427;
  --color-text-secondary: #3a5a70;
  --color-text-muted: #6a8898;
  --color-on-accent: #ffffff;
  --color-bg: #f0f4f8;
  --color-surface: #ffffff;
  --color-border: transparent;
  --color-border-subtle: rgba(0, 20, 39, 0.12);
  --color-accent: #bf0603;
  --color-accent-hover: #8d0801;
  --color-link: #bf0603;
  --color-link-hover: #8d0801;
  --color-danger: #bf0603;
  --color-danger-bg: #fde8e8;
  --color-danger-hover: #8d0801;
  --color-success: #4a6e60;
  --color-success-bg: #e0ede8;
  --color-success-hover: #2e5448;
  --color-overlay: rgba(0, 10, 20, 0.4);
  --color-header-user-bg: rgba(0, 20, 39, 0.07);
  --color-header-user-bg-hover: rgba(0, 20, 39, 0.13);
  --color-option-bg: #f5f7fa;
  --color-option-border: #dde3ea;
}