/* ===================================================================
   CLARAMOUR - DESIGN SYSTEM & THEMES
   Twelve color palettes; shared Claramour imagery
   =================================================================== */

:root {
  /* Common typography */
  --font-serif: 'Playfair Display', 'Cormorant Garamond', 'Georgia', serif;
  --font-sans: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-handwriting: 'Caveat', 'Dancing Script', cursive;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

  /* Spacing & Radii */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 22px;
  --radius-xl: 30px;
  --radius-full: 9999px;

  --transition-fast: 0.15s ease;
  --transition-normal: 0.25s ease;
  --transition-smooth: 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}


/* Shared tokens, independent of imagery. */
:root { --bg-card:#fff; --text-inverse:#fff; --color-sunflower:#d49737; --color-sunflower-dark:#95671f; --color-sage:#829779; --color-sage-light:#e5eddf; }

:root, body[data-theme="pink-pastel"] {
  --bg-page: #fff1f5;
  --bg-sidebar: color-mix(in srgb, #c16b8a 12%, white);
  --bg-sidebar-hover: color-mix(in srgb, #c16b8a 18%, #fff1f5);
  --bg-card: #ffffff;
  --bg-card-muted: #fff1f5;
  --bg-overlay: rgba(20,24,35,.45);
  --color-primary: #a64d70;
  --color-primary-hover: #703c53;
  --color-primary-light: color-mix(in srgb, #c16b8a 12%, white);
  --color-nav-active: color-mix(in srgb, #c16b8a 12%, white);
  --color-nav-active-text: #703c53;
  --color-nav-active-border: #c16b8a;
  --color-ribbon-red: #c16b8a;
  --color-blush: #edb2c7;
  --text-main: #703c53;
  --text-muted: #89546a;
  --text-subtle: #89546a;
  --text-inverse: #ffffff;
  --header-title-color: #703c53;
  --border-light: color-mix(in srgb, #c16b8a 22%, transparent);
  --border-subtle: color-mix(in srgb, #c16b8a 22%, #fff1f5);
  --border-dark: #703c53;
  --shadow-sm: 0 2px 8px #18202a08;
  --shadow-md: 0 8px 24px #18202a12;
  --shadow-lg: 0 16px 40px #18202a20;
  --shadow-card: 0 4px 20px #18202a09;
  --bg-note-pink: color-mix(in srgb, #c16b8a 12%, white);
  --tape-color: color-mix(in srgb, #c16b8a 12%, white);
  --gingham-pink: #f8d7e3;
  color-scheme: light;
}

body[data-theme="soleil"] {
  --bg-page: #fff8f2;
  --bg-sidebar: color-mix(in srgb, #b33e33 12%, white);
  --bg-sidebar-hover: color-mix(in srgb, #b33e33 18%, #fff8f2);
  --bg-card: #ffffff;
  --bg-card-muted: #fff8f2;
  --bg-overlay: rgba(20,24,35,.45);
  --color-primary: #b33e33;
  --color-primary-hover: #943026;
  --color-primary-light: color-mix(in srgb, #b33e33 12%, white);
  --color-nav-active: color-mix(in srgb, #b33e33 12%, white);
  --color-nav-active-text: #62302a;
  --color-nav-active-border: #b33e33;
  --color-ribbon-red: #b33e33;
  --color-blush: #f4845f;
  --text-main: #62302a;
  --text-muted: #855c50;
  --text-subtle: #855c50;
  --text-inverse: #ffffff;
  --header-title-color: #62302a;
  --border-light: color-mix(in srgb, #b33e33 22%, transparent);
  --border-subtle: color-mix(in srgb, #b33e33 22%, #fff8f2);
  --border-dark: #62302a;
  --shadow-sm: 0 2px 8px #18202a08;
  --shadow-md: 0 8px 24px #18202a12;
  --shadow-lg: 0 16px 40px #18202a20;
  --shadow-card: 0 4px 20px #18202a09;
  --bg-note-pink: color-mix(in srgb, #b33e33 12%, white);
  --tape-color: color-mix(in srgb, #b33e33 12%, white);
  --gingham-pink: #f79d65;
  color-scheme: light;
}

body[data-theme="brume"] {
  --bg-page: #f4f8ff;
  --bg-sidebar: color-mix(in srgb, #506b98 12%, white);
  --bg-sidebar-hover: color-mix(in srgb, #506b98 18%, #f4f8ff);
  --bg-card: #ffffff;
  --bg-card-muted: #f4f8ff;
  --bg-overlay: rgba(20,24,35,.45);
  --color-primary: #506b98;
  --color-primary-hover: #3e5378;
  --color-primary-light: color-mix(in srgb, #506b98 12%, white);
  --color-nav-active: color-mix(in srgb, #506b98 12%, white);
  --color-nav-active-text: #615d6c;
  --color-nav-active-border: #506b98;
  --color-ribbon-red: #506b98;
  --color-blush: #89bbfe;
  --text-main: #615d6c;
  --text-muted: #615d6c;
  --text-subtle: #615d6c;
  --text-inverse: #ffffff;
  --header-title-color: #615d6c;
  --border-light: color-mix(in srgb, #506b98 22%, transparent);
  --border-subtle: color-mix(in srgb, #506b98 22%, #f4f8ff);
  --border-dark: #615d6c;
  --shadow-sm: 0 2px 8px #18202a08;
  --shadow-md: 0 8px 24px #18202a12;
  --shadow-lg: 0 16px 40px #18202a20;
  --shadow-card: 0 4px 20px #18202a09;
  --bg-note-pink: color-mix(in srgb, #506b98 12%, white);
  --tape-color: color-mix(in srgb, #506b98 12%, white);
  --gingham-pink: #acedff;
  color-scheme: light;
}

body[data-theme="braise"] {
  --bg-page: #fff8eb;
  --bg-sidebar: color-mix(in srgb, #941b0c 12%, white);
  --bg-sidebar-hover: color-mix(in srgb, #941b0c 18%, #fff8eb);
  --bg-card: #ffffff;
  --bg-card-muted: #fff8eb;
  --bg-overlay: rgba(20,24,35,.45);
  --color-primary: #941b0c;
  --color-primary-hover: #621708;
  --color-primary-light: color-mix(in srgb, #941b0c 12%, white);
  --color-nav-active: color-mix(in srgb, #941b0c 12%, white);
  --color-nav-active-text: #220901;
  --color-nav-active-border: #941b0c;
  --color-ribbon-red: #941b0c;
  --color-blush: #941b0c;
  --text-main: #220901;
  --text-muted: #76503e;
  --text-subtle: #76503e;
  --text-inverse: #ffffff;
  --header-title-color: #220901;
  --border-light: color-mix(in srgb, #941b0c 22%, transparent);
  --border-subtle: color-mix(in srgb, #941b0c 22%, #fff8eb);
  --border-dark: #220901;
  --shadow-sm: 0 2px 8px #18202a08;
  --shadow-md: 0 8px 24px #18202a12;
  --shadow-lg: 0 16px 40px #18202a20;
  --shadow-card: 0 4px 20px #18202a09;
  --bg-note-pink: color-mix(in srgb, #941b0c 12%, white);
  --tape-color: color-mix(in srgb, #941b0c 12%, white);
  --gingham-pink: #621708;
  color-scheme: light;
}

body[data-theme="minuit"] {
  --bg-page: #111827;
  --bg-sidebar: #1e293b;
  --bg-sidebar-hover: color-mix(in srgb, #a5b4fc 18%, #111827);
  --bg-card: #1e293b;
  --bg-card-muted: #111827;
  --bg-overlay: rgba(20,24,35,.45);
  --color-primary: #a5b4fc;
  --color-primary-hover: #c7d2fe;
  --color-primary-light: #1e293b;
  --color-nav-active: #1e293b;
  --color-nav-active-text: #e2e8f0;
  --color-nav-active-border: #a5b4fc;
  --color-ribbon-red: #a5b4fc;
  --color-blush: #334155;
  --text-main: #e2e8f0;
  --text-muted: #b8c5d6;
  --text-subtle: #b8c5d6;
  --text-inverse: #111827;
  --header-title-color: #e2e8f0;
  --border-light: color-mix(in srgb, #a5b4fc 22%, transparent);
  --border-subtle: color-mix(in srgb, #a5b4fc 22%, #111827);
  --border-dark: #e2e8f0;
  --shadow-sm: 0 2px 8px #18202a08;
  --shadow-md: 0 8px 24px #18202a12;
  --shadow-lg: 0 16px 40px #18202a20;
  --shadow-card: 0 4px 20px #18202a09;
  --bg-note-pink: #1e293b;
  --tape-color: #1e293b;
  --gingham-pink: #1e293b;
  color-scheme: dark;
}

body[data-theme="sauge"] {
  --bg-page: #f3f5ef;
  --bg-sidebar: color-mix(in srgb, #64765a 12%, white);
  --bg-sidebar-hover: color-mix(in srgb, #64765a 18%, #f3f5ef);
  --bg-card: #ffffff;
  --bg-card-muted: #f3f5ef;
  --bg-overlay: rgba(20,24,35,.45);
  --color-primary: #64765a;
  --color-primary-hover: #354631;
  --color-primary-light: color-mix(in srgb, #64765a 12%, white);
  --color-nav-active: color-mix(in srgb, #64765a 12%, white);
  --color-nav-active-text: #354631;
  --color-nav-active-border: #64765a;
  --color-ribbon-red: #64765a;
  --color-blush: #b5c4a4;
  --text-main: #354631;
  --text-muted: #57694f;
  --text-subtle: #57694f;
  --text-inverse: #ffffff;
  --header-title-color: #354631;
  --border-light: color-mix(in srgb, #64765a 22%, transparent);
  --border-subtle: color-mix(in srgb, #64765a 22%, #f3f5ef);
  --border-dark: #354631;
  --shadow-sm: 0 2px 8px #18202a08;
  --shadow-md: 0 8px 24px #18202a12;
  --shadow-lg: 0 16px 40px #18202a20;
  --shadow-card: 0 4px 20px #18202a09;
  --bg-note-pink: color-mix(in srgb, #64765a 12%, white);
  --tape-color: color-mix(in srgb, #64765a 12%, white);
  --gingham-pink: #e0e7d7;
  color-scheme: light;
}

body[data-theme="lavande"] {
  --bg-page: #f7f3fc;
  --bg-sidebar: color-mix(in srgb, #84679f 12%, white);
  --bg-sidebar-hover: color-mix(in srgb, #84679f 18%, #f7f3fc);
  --bg-card: #ffffff;
  --bg-card-muted: #f7f3fc;
  --bg-overlay: rgba(20,24,35,.45);
  --color-primary: #84679f;
  --color-primary-hover: #4c365e;
  --color-primary-light: color-mix(in srgb, #84679f 12%, white);
  --color-nav-active: color-mix(in srgb, #84679f 12%, white);
  --color-nav-active-text: #4c365e;
  --color-nav-active-border: #84679f;
  --color-ribbon-red: #84679f;
  --color-blush: #c7aedf;
  --text-main: #4c365e;
  --text-muted: #74588f;
  --text-subtle: #74588f;
  --text-inverse: #ffffff;
  --header-title-color: #4c365e;
  --border-light: color-mix(in srgb, #84679f 22%, transparent);
  --border-subtle: color-mix(in srgb, #84679f 22%, #f7f3fc);
  --border-dark: #4c365e;
  --shadow-sm: 0 2px 8px #18202a08;
  --shadow-md: 0 8px 24px #18202a12;
  --shadow-lg: 0 16px 40px #18202a20;
  --shadow-card: 0 4px 20px #18202a09;
  --bg-note-pink: color-mix(in srgb, #84679f 12%, white);
  --tape-color: color-mix(in srgb, #84679f 12%, white);
  --gingham-pink: #e8dcf5;
  color-scheme: light;
}

body[data-theme="sable"] {
  --bg-page: #faf6ef;
  --bg-sidebar: color-mix(in srgb, #9b7448 12%, white);
  --bg-sidebar-hover: color-mix(in srgb, #9b7448 18%, #faf6ef);
  --bg-card: #ffffff;
  --bg-card-muted: #faf6ef;
  --bg-overlay: rgba(20,24,35,.45);
  --color-primary: #88633b;
  --color-primary-hover: #5b432e;
  --color-primary-light: color-mix(in srgb, #9b7448 12%, white);
  --color-nav-active: color-mix(in srgb, #9b7448 12%, white);
  --color-nav-active-text: #5b432e;
  --color-nav-active-border: #9b7448;
  --color-ribbon-red: #9b7448;
  --color-blush: #d6bd96;
  --text-main: #5b432e;
  --text-muted: #88633b;
  --text-subtle: #88633b;
  --text-inverse: #ffffff;
  --header-title-color: #5b432e;
  --border-light: color-mix(in srgb, #9b7448 22%, transparent);
  --border-subtle: color-mix(in srgb, #9b7448 22%, #faf6ef);
  --border-dark: #5b432e;
  --shadow-sm: 0 2px 8px #18202a08;
  --shadow-md: 0 8px 24px #18202a12;
  --shadow-lg: 0 16px 40px #18202a20;
  --shadow-card: 0 4px 20px #18202a09;
  --bg-note-pink: color-mix(in srgb, #9b7448 12%, white);
  --tape-color: color-mix(in srgb, #9b7448 12%, white);
  --gingham-pink: #eee2ce;
  color-scheme: light;
}

body[data-theme="lagon"] {
  --bg-page: #eff9f7;
  --bg-sidebar: color-mix(in srgb, #477e78 12%, white);
  --bg-sidebar-hover: color-mix(in srgb, #477e78 18%, #eff9f7);
  --bg-card: #ffffff;
  --bg-card-muted: #eff9f7;
  --bg-overlay: rgba(20,24,35,.45);
  --color-primary: #477e78;
  --color-primary-hover: #244d49;
  --color-primary-light: color-mix(in srgb, #477e78 12%, white);
  --color-nav-active: color-mix(in srgb, #477e78 12%, white);
  --color-nav-active-text: #244d49;
  --color-nav-active-border: #477e78;
  --color-ribbon-red: #477e78;
  --color-blush: #9bcfc8;
  --text-main: #244d49;
  --text-muted: #386d67;
  --text-subtle: #386d67;
  --text-inverse: #ffffff;
  --header-title-color: #244d49;
  --border-light: color-mix(in srgb, #477e78 22%, transparent);
  --border-subtle: color-mix(in srgb, #477e78 22%, #eff9f7);
  --border-dark: #244d49;
  --shadow-sm: 0 2px 8px #18202a08;
  --shadow-md: 0 8px 24px #18202a12;
  --shadow-lg: 0 16px 40px #18202a20;
  --shadow-card: 0 4px 20px #18202a09;
  --bg-note-pink: color-mix(in srgb, #477e78 12%, white);
  --tape-color: color-mix(in srgb, #477e78 12%, white);
  --gingham-pink: #d3eeea;
  color-scheme: light;
}

body[data-theme="rose-bois"] {
  --bg-page: #faf5f2;
  --bg-sidebar: color-mix(in srgb, #ac605e 12%, white);
  --bg-sidebar-hover: color-mix(in srgb, #ac605e 18%, #faf5f2);
  --bg-card: #ffffff;
  --bg-card-muted: #faf5f2;
  --bg-overlay: rgba(20,24,35,.45);
  --color-primary: #ac605e;
  --color-primary-hover: #543a35;
  --color-primary-light: color-mix(in srgb, #ac605e 12%, white);
  --color-nav-active: color-mix(in srgb, #ac605e 12%, white);
  --color-nav-active-text: #543a35;
  --color-nav-active-border: #ac605e;
  --color-ribbon-red: #ac605e;
  --color-blush: #d9aaa4;
  --text-main: #543a35;
  --text-muted: #99534f;
  --text-subtle: #99534f;
  --text-inverse: #ffffff;
  --header-title-color: #543a35;
  --border-light: color-mix(in srgb, #ac605e 22%, transparent);
  --border-subtle: color-mix(in srgb, #ac605e 22%, #faf5f2);
  --border-dark: #543a35;
  --shadow-sm: 0 2px 8px #18202a08;
  --shadow-md: 0 8px 24px #18202a12;
  --shadow-lg: 0 16px 40px #18202a20;
  --shadow-card: 0 4px 20px #18202a09;
  --bg-note-pink: color-mix(in srgb, #ac605e 12%, white);
  --tape-color: color-mix(in srgb, #ac605e 12%, white);
  --gingham-pink: #f0ded8;
  color-scheme: light;
}

.theme-dropdown-item.active::after { content:"✓"; margin-left:auto; font-weight:700; }
.theme-dropdown-item.active { background:var(--color-primary-light); color:var(--text-main); box-shadow:inset 3px 0 var(--color-primary); }
body.reduce-decorations .note-sticker-bow, body.reduce-decorations .note-sticker-tulip { display:none !important; }

body[data-theme="graphite"] {
  --bg-page: #242628;
  --bg-sidebar: #303436;
  --bg-sidebar-hover: color-mix(in srgb, #b7dfbf 18%, #242628);
  --bg-card: #303436;
  --bg-card-muted: #242628;
  --bg-overlay: rgba(20,24,35,.45);
  --color-primary: #b7dfbf;
  --color-primary-hover: #d1ecd6;
  --color-primary-light: #303436;
  --color-nav-active: #303436;
  --color-nav-active-text: #edf3ef;
  --color-nav-active-border: #b7dfbf;
  --color-ribbon-red: #b7dfbf;
  --color-blush: #46504b;
  --text-main: #edf3ef;
  --text-muted: #bbc9bf;
  --text-subtle: #bbc9bf;
  --text-inverse: #242628;
  --header-title-color: #edf3ef;
  --border-light: color-mix(in srgb, #b7dfbf 22%, transparent);
  --border-subtle: color-mix(in srgb, #b7dfbf 22%, #242628);
  --border-dark: #edf3ef;
  --shadow-sm: 0 2px 8px #18202a08;
  --shadow-md: 0 8px 24px #18202a12;
  --shadow-lg: 0 16px 40px #18202a20;
  --shadow-card: 0 4px 20px #18202a09;
  --bg-note-pink: #303436;
  --tape-color: #303436;
  --gingham-pink: #303436;
  color-scheme: dark;
}

body[data-theme="crepuscule"] {
  --bg-page: #26212c;
  --bg-sidebar: #352e3d;
  --bg-sidebar-hover: color-mix(in srgb, #d4bdeb 18%, #26212c);
  --bg-card: #352e3d;
  --bg-card-muted: #26212c;
  --bg-overlay: rgba(20,24,35,.45);
  --color-primary: #d4bdeb;
  --color-primary-hover: #e5d5f5;
  --color-primary-light: #352e3d;
  --color-nav-active: #352e3d;
  --color-nav-active-text: #f2edf6;
  --color-nav-active-border: #d4bdeb;
  --color-ribbon-red: #d4bdeb;
  --color-blush: #53465f;
  --text-main: #f2edf6;
  --text-muted: #c9bdd3;
  --text-subtle: #c9bdd3;
  --text-inverse: #26212c;
  --header-title-color: #f2edf6;
  --border-light: color-mix(in srgb, #d4bdeb 22%, transparent);
  --border-subtle: color-mix(in srgb, #d4bdeb 22%, #26212c);
  --border-dark: #f2edf6;
  --shadow-sm: 0 2px 8px #18202a08;
  --shadow-md: 0 8px 24px #18202a12;
  --shadow-lg: 0 16px 40px #18202a20;
  --shadow-card: 0 4px 20px #18202a09;
  --bg-note-pink: #352e3d;
  --tape-color: #352e3d;
  --gingham-pink: #352e3d;
  color-scheme: dark;
}