/* ==========================================================================
   Theme tokens
   --------------------------------------------------------------------------
   Dark is the default. Every surface is a distinct, intentionally chosen
   value — the palette is not an inversion of the light theme, and nothing is
   pure black or pure white.

   Selecting "System" in Settings sets data-theme-preference="system" and the
   bootstrap script resolves the concrete theme onto data-theme, so the rules
   below only ever need to match the *effective* theme.
   ========================================================================== */

:root,
html[data-theme='dark'] {
  color-scheme: dark;

  /* Surfaces, from the page backdrop up to the most raised element. */
  --color-bg: #101114;
  --color-bg-nav: #15171c;
  --color-surface: #1a1c22;
  --color-surface-raised: #21242b;
  --color-surface-input: #1d2027;
  --color-surface-dialog: #24272e;
  --color-surface-sheet: #21242b;
  --color-backdrop: rgba(6, 7, 9, 0.72);

  /* Lines */
  --color-border: #2a2e36;
  --color-border-strong: #3b4048;
  --color-border-subtle: #22252c;

  /* Text */
  --color-text: #eef0f4;
  --color-text-muted: #a3aab7;
  --color-text-faint: #737a88;
  --color-text-inverse: #14161b;

  /* Interactive. Primary actions use a high-contrast neutral; the warm accent
     is reserved for favourites, selection and focus so it keeps its meaning. */
  --color-primary-bg: #f1f2f5;
  --color-primary-bg-hover: #ffffff;
  --color-primary-text: #14161b;

  --color-accent: #e0a558;
  --color-accent-strong: #f0bb74;
  --color-accent-soft: rgba(224, 165, 88, 0.16);
  --color-accent-contrast: #1c1206;

  --color-danger: #f0736f;
  --color-danger-soft: rgba(240, 115, 111, 0.14);
  --color-success: #5ecb95;
  --color-success-soft: rgba(94, 203, 149, 0.14);
  --color-info: #7bb0e8;
  --color-info-soft: rgba(123, 176, 232, 0.14);

  --color-selection: rgba(224, 165, 88, 0.9);
  --color-focus-ring: #8fb9ff;

  /* Elevation: soft, low-contrast shadows. No glow effects. */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 6px 18px rgba(0, 0, 0, 0.42);
  --shadow-lg: 0 22px 60px rgba(0, 0, 0, 0.55);

  --color-skeleton: #22252c;
  --color-skeleton-sheen: rgba(255, 255, 255, 0.045);
  --color-toast-bg: #2b2f37;
  --color-toast-text: #f2f3f6;
}

html[data-theme='light'] {
  color-scheme: light;

  --color-bg: #f6f7f9;
  --color-bg-nav: #ffffff;
  --color-surface: #ffffff;
  --color-surface-raised: #ffffff;
  --color-surface-input: #f1f2f5;
  --color-surface-dialog: #ffffff;
  --color-surface-sheet: #ffffff;
  --color-backdrop: rgba(24, 26, 31, 0.42);

  --color-border: #e3e5ea;
  --color-border-strong: #c8ccd4;
  --color-border-subtle: #eceef2;

  --color-text: #14161b;
  --color-text-muted: #5b6272;
  --color-text-faint: #878e9d;
  --color-text-inverse: #ffffff;

  --color-primary-bg: #17191f;
  --color-primary-bg-hover: #24272e;
  --color-primary-text: #ffffff;

  --color-accent: #9a6114;
  --color-accent-strong: #7d4e0f;
  --color-accent-soft: rgba(154, 97, 20, 0.12);
  --color-accent-contrast: #ffffff;

  --color-danger: #c4392f;
  --color-danger-soft: rgba(196, 57, 47, 0.1);
  --color-success: #157a4f;
  --color-success-soft: rgba(21, 122, 79, 0.1);
  --color-info: #1f5f9e;
  --color-info-soft: rgba(31, 95, 158, 0.1);

  --color-selection: rgba(154, 97, 20, 0.85);
  --color-focus-ring: #2f6fd0;

  --shadow-sm: 0 1px 2px rgba(20, 22, 27, 0.08);
  --shadow-md: 0 6px 18px rgba(20, 22, 27, 0.1);
  --shadow-lg: 0 22px 50px rgba(20, 22, 27, 0.16);

  --color-skeleton: #e7e9ee;
  --color-skeleton-sheen: rgba(255, 255, 255, 0.7);
  --color-toast-bg: #24272e;
  --color-toast-text: #f2f3f6;
}