/* ==========================================================================
   Design tokens — Rose Champêtre palette (from the original guide)
   Variable names match what App.js / FilterManager / components expect
   (--primary-color, --danger-rgb, --card-bg, --radius-lg, --fs-sm …).
   ========================================================================== */

:root {
  /* Brand */
  --navy: #35414D;
  --merlot: #6B4242;
  --rosegold: #D19D90;
  --powder: #BEC7D0;
  --cream: #F7F5EB;

  /* Semantic */
  --primary: var(--merlot);
  --primary-color: var(--primary);
  --primary-rgb: 107, 66, 66;
  --primary-hover: #593535;
  --primary-dark: #4a2c2c;
  --primary-soft: rgba(107, 66, 66, 0.10);
  --primary-contrast: #FFFFFF;
  --accent: var(--rosegold);
  --accent-rgb: 209, 157, 144;

  --success-color: #3F7D5C;  --success-rgb: 63, 125, 92;   --success-soft: rgba(63, 125, 92, 0.12);
  --danger-color:  #B5473A;  --danger-rgb:  181, 71, 58;   --danger-soft:  rgba(181, 71, 58, 0.12);
  --warning-color: #D29A2E;  --warning-rgb: 210, 154, 46;  --warning-soft: rgba(210, 154, 46, 0.16);
  --info-color:    #4F6D8A;  --info-rgb:    79, 109, 138;  --info-soft:    rgba(79, 109, 138, 0.12);

  /* Surfaces & text */
  --bg-color: var(--cream);
  --card-bg: #FFFFFF;
  --card-bg-subtle: #FBFAF5;
  --text-color: var(--navy);
  --text-strong: #29323B;
  --text-muted: #5C6773;
  --border-color: rgba(53, 65, 77, 0.14);
  --border-strong: rgba(53, 65, 77, 0.28);
  --input-bg: #FFFFFF;
  --input-bd: rgba(53, 65, 77, 0.22);

  /* Typography */
  --font-family: "Lora", Georgia, "Times New Roman", serif;
  --font-heading: "Playfair Display", Georgia, serif;
  --font-script: "Dancing Script", cursive;
  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-md: 1rem;
  --fs-lg: 1.125rem;
  --fs-xl: 1.4rem;

  /* Shape & motion */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(53, 65, 77, 0.06);
  --shadow-md: 0 10px 30px rgba(53, 65, 77, 0.10);
  --shadow-lg: 0 20px 50px rgba(53, 65, 77, 0.14);
  --shadow-focus: 0 0 0 3px rgba(var(--accent-rgb), 0.45);
  --transition: 0.2s ease;
  --transition-fast: 0.15s ease;
}

/* Dark mode follows the device setting (data-theme="light" forces light). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --primary: var(--rosegold);
    --primary-rgb: 209, 157, 144;
    --primary-hover: #DCAEA3;
    --primary-soft: rgba(209, 157, 144, 0.14);
    --primary-contrast: #232A31;
    --accent: var(--merlot);
    --bg-color: #232A31;
    --card-bg: #2C343D;
    --card-bg-subtle: #283038;
    --text-color: var(--cream);
    --text-strong: #FFFFFF;
    --text-muted: #C9CFD6;
    --border-color: rgba(247, 245, 235, 0.14);
    --border-strong: rgba(247, 245, 235, 0.28);
    --input-bg: #232A31;
    --input-bd: rgba(247, 245, 235, 0.22);
    --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.35);
    --shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.45);
  }
}

:root[data-theme="dark"] {
  --primary: var(--rosegold);
  --primary-rgb: 209, 157, 144;
  --primary-hover: #DCAEA3;
  --primary-soft: rgba(209, 157, 144, 0.14);
  --primary-contrast: #232A31;
  --accent: var(--merlot);
  --bg-color: #232A31;
  --card-bg: #2C343D;
  --card-bg-subtle: #283038;
  --text-color: var(--cream);
  --text-strong: #FFFFFF;
  --text-muted: #C9CFD6;
  --border-color: rgba(247, 245, 235, 0.14);
  --border-strong: rgba(247, 245, 235, 0.28);
  --input-bg: #232A31;
  --input-bd: rgba(247, 245, 235, 0.22);
  --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.45);
}

/* Base */
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg-color);
  color: var(--text-color);
  font-family: var(--font-family);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { font-family: var(--font-heading); color: var(--text-strong); }
a { color: var(--primary); }
a:hover { color: var(--primary-hover); }
.text-muted-2 { color: var(--text-muted) !important; }