/* assets/css/jw-theme.css
   -----------------------------------------------------------
   JW Theme Tokens
   - System theme lives on :root (no data-jw-theme attr)
   - Presets switch via :root[data-jw-theme="..."]
   - Accents are derived to stay consistent per theme:
     --jw-accent        = bridge/highlight (usually between primary & secondary vibe)
     --jw-danger        = theme-appropriate red/coral (not always brand crimson)
   ----------------------------------------------------------- */


/* ===========================================================
   UI SEMANTIC COLORS (apply to all themes)
   - Put ALL component colors here.
   - Each theme only defines the base palette:
     page/bg/surface/text/primary/contrast/border/shadow/etc.
   =========================================================== */
:root {
  /* Text roles */
  --jw-text-strong: var(--jw-text);
  --jw-text-subtle: var(--jw-text-muted);

  /* Lines */
  --jw-divider: var(--jw-border-soft);

  /* Generic controls */
  --jw-control-bg: var(--jw-surface-2);
  --jw-control-bg-hover: color-mix(in srgb, var(--jw-control-bg) 70%, var(--jw-surface) 30%);
  --jw-control-text: var(--jw-text);

  /* Primary action */
  --jw-primary-bg: var(--jw-primary);
  --jw-primary-text: var(--jw-primary-contrast);
  --jw-primary-bg-hover: color-mix(in srgb, var(--jw-primary-bg) 88%, #000 12%);

  /* Secondary action */
  --jw-secondary-bg: var(--jw-surface);
  --jw-secondary-text: var(--jw-text);
  --jw-secondary-border: var(--jw-border-soft);
  --jw-secondary-bg-hover: color-mix(in srgb, var(--jw-secondary-bg) 88%, var(--jw-surface-2) 12%);

  --jw-success: var(--jw-primary);
	
  /* Pills */
  --jw-pill-active-bg: var(--jw-primary);
  --jw-pill-active-text: var(--jw-primary-contrast);

  /* Tabs */
  --jw-tab-bg: var(--jw-control-bg);
  --jw-tab-text: var(--jw-control-text);
  --jw-tab-border: var(--jw-border-soft);
  --jw-tab-active-bg: var(--jw-primary-bg);
  --jw-tab-active-text: var(--jw-primary-text);
  --jw-tab-active-border: color-mix(in srgb, var(--jw-primary-bg) 45%, transparent);

  /* Cards */
  --jw-card-bg: var(--jw-surface);
  --jw-card-shadow: var(--jw-shadow-1);

  /* overlays (theme-agnostic, derived from text color) */
  --jw-card-done-overlay: color-mix(in srgb, var(--jw-text) 7%, transparent);
  --jw-card-paused-overlay: color-mix(in srgb, var(--jw-text) 7%, transparent);

  /* patterns (subtle) */
  --jw-card-done-pattern: color-mix(in srgb, var(--jw-text) 6%, transparent);
  --jw-card-paused-pattern: color-mix(in srgb, var(--jw-text) 6%, transparent);
  --jw-card-paused-border: color-mix(in srgb, var(--jw-text) 25%, transparent);

  /* Dropdowns / menus */
  --jw-menu-bg: var(--jw-surface);
  --jw-menu-shadow: var(--jw-shadow-2);
  --jw-menu-item-hover: var(--jw-surface-2);

  /* Progress */
  --jw-progress-track-bg: var(--jw-surface-2);
  --jw-progress-fill-bg: var(--jw-primary);

	/* Default/neutral chip */
	--jw-chip-bg: color-mix(in srgb, var(--jw-surface) 86%, var(--jw-primary) 14%);
	--jw-chip-text: var(--jw-text);

	/* "Tone" chip (used for Good + Bad = SAME) */
	--jw-chip-tone-bg: color-mix(in srgb, var(--jw-surface) 84%, var(--jw-primary) 16%);
	--jw-chip-tone-text: var(--jw-text);

	/* "Total" chip (distinct) */
	--jw-chip-total-bg: var(--jw-primary);
	--jw-chip-total-text: var(--jw-primary-contrast);

	/* Optional: accent total instead of primary (if you want) */
	--jw-chip-total-accent-bg: var(--jw-accent);
	--jw-chip-total-accent-text: #fff;

  /* Skeletons */
  --jw-skel-a: color-mix(in srgb, var(--jw-text) 10%, transparent);
  --jw-skel-b: color-mix(in srgb, var(--jw-text) 04%, transparent);

  /* Focus rings */
  --jw-focus-ring: color-mix(in srgb, var(--jw-primary) 70%, transparent);

  /* Overlays */
  --jw-backdrop: var(--jw-overlay-bg);
	
	/* ===========================================================
	   Ornate & Frame Border System (PRIMARY-LOCKED)
	   - All hues derive ONLY from --jw-primary
	   - Prevents color drift across themes
	   =========================================================== */

	/* ---- Core ornate tones (same hue, different strengths) ---- */
	--jw-ornate-c1: color-mix(in srgb, var(--jw-primary) 70%, transparent);
	--jw-ornate-c2: color-mix(in srgb, var(--jw-primary) 45%, transparent);
	--jw-ornate-c3: color-mix(in srgb, var(--jw-primary) 25%, transparent);

	/* ---- Neutral ink & glow (no hue shift) ---- */
	--jw-ornate-ink:  color-mix(in srgb, var(--jw-text) 22%, transparent);
	--jw-ornate-glow: color-mix(in srgb, var(--jw-primary) 18%, transparent);

	/* ===========================================================
	   Frame inks (USED BY patterns / dots / geometry)
	   - Still primary-based
	   - Slightly grounded to card background for harmony
	   =========================================================== */
	--jw-frame-ink:  color-mix(in srgb, var(--jw-primary) 38%, var(--jw-card-bg));
	--jw-frame-ink2: color-mix(in srgb, var(--jw-primary) 26%, var(--jw-card-bg));
	--jw-frame-line: color-mix(in srgb, var(--jw-text) 16%, var(--jw-card-bg));

	/* ===========================================================
	   MID style "paper" fills (primary-tinted, never accent)
	   =========================================================== */
	--jw-frame-fill:   color-mix(in srgb, var(--jw-surface) 88%, var(--jw-primary) 12%);
	--jw-frame-fill-2: color-mix(in srgb, var(--jw-surface) 94%, var(--jw-primary) 6%);

	/* ===========================================================
	   Sizes / geometry (unchanged)
	   =========================================================== */
	--jw-frame-radius: var(--jw-radius-2, 14px);
	--jw-frame-gap: 10px;        /* ring thickness for MID */
	--jw-frame-dash: 6px;        /* dash length */
	--jw-frame-dash-gap: 5px;    /* dash gap */
	--jw-frame-corner: 18px;     /* art deco corner length */
	--jw-frame-stroke: 1px;      /* thin lines */

  --jw-clock-bg: var(--jw-surface);
  --jw-clock-border: var(--jw-border-soft);
  --jw-clock-shadow: var(--jw-shadow-1);

  --jw-clock-ink: var(--jw-text);
  --jw-clock-ink-muted: var(--jw-text-muted);

  --jw-clock-accent: var(--jw-primary);
  --jw-clock-accent-2: var(--jw-secondary);

  --jw-clock-hand-hour: var(--jw-clock-ink);
  --jw-clock-hand-min: var(--jw-clock-ink);
  --jw-clock-hand-sec: var(--jw-primary);

  --jw-clock-tick: color-mix(in srgb, var(--jw-text) 18%, transparent);
  --jw-clock-tick-strong: color-mix(in srgb, var(--jw-text) 35%, transparent);	
	
}


/* ===========================================================
   1) SYSTEM (Jannah Ways Default System Theme)
   (JW Brand)
   =========================================================== */
:root {
  /* App/page background */
  --jw-page-bg: #fbf8ee;

  /* Core surfaces */
  --jw-bg: #f3f4f6;
  --jw-surface: #ffffff;
  --jw-surface-2: rgba(0,0,0,0.04);

  /* Text */
  --jw-text: #111827;
  --jw-text-muted: rgba(17, 24, 39, 0.75);

  /* Borders + shadows */
  --jw-border-soft: rgba(0,0,0,0.10);
  --jw-shadow-1: 0 1px 4px rgba(0, 0, 0, 0.06);
  --jw-shadow-2: 0 2px 10px rgba(0, 0, 0, 0.16);

  /* Brand/action */
  --jw-primary: #003823;            /* JW Green */
  --jw-primary-contrast: #ffffff;

  --jw-secondary: #041E36;          /* JW Blue */
  --jw-accent: #533100;             /* JW Gold */
  --jw-danger: #531A00;             /* JW Crimson */

  /* Status */
  --jw-success: #2e7d32;
  --jw-warning: #f9a825;
  --jw-info: #333333;

  /* Overlays */
  --jw-overlay-bg: rgba(0, 0, 0, 0.45);

  /* Toasts */
  --jw-toast-text: #ffffff;

  /* Pills */
  --jw-pill-bg: #f7f7f7;
  --jw-pill-bg-hover: #f0f0f0;
}


/* ===========================================================
   2) DARK (JW Dark - brand aligned)
   Primary/Secondary updated from agreed palette:
   Primary:   #0D5B3F
   Secondary: #1C3A55
   Accents derived from those (gold + warm coral danger).
   =========================================================== */
:root[data-jw-theme="dark"] {
  --jw-page-bg: #070b0a;

  --jw-bg: #08110d;
  --jw-surface: #0d1713;
  --jw-surface-2: rgba(255,255,255,0.06);

  --jw-text: #e8f0ec;
  --jw-text-muted: rgba(232, 240, 236, 0.78);

  --jw-border-soft: rgba(255,255,255,0.12);

  --jw-shadow-1: 0 1px 4px rgba(0,0,0,0.45);
  --jw-shadow-2: 0 2px 10px rgba(0,0,0,0.60);

  --jw-primary: #0D5B3F;
  --jw-primary-contrast: #EFFFF8;

  --jw-secondary: #1C3A55;
  --jw-accent: #C9A227;             /* derived: metallic gold works on dark */
  --jw-danger: #FF5733;             /* derived: warm coral pops on dark */

  --jw-success: #2fb06a;
  --jw-warning: #d7a300;
  --jw-info: #1f2937;

  --jw-overlay-bg: rgba(0,0,0,0.66);

  --jw-toast-text: #ffffff;

  --jw-pill-bg: rgba(255,255,255,0.07);
  --jw-pill-bg-hover: rgba(255,255,255,0.10);
}


/* ===========================================================
   3) LIGHT (JW Light - brand aligned, brighter)
   Primary:   #004C3F
   Secondary: #1E3A5F
   Accents derived (warm gold, controlled danger).
   =========================================================== */
:root[data-jw-theme="light"] {
  --jw-page-bg: #f3f4f6;

  --jw-bg: #f7f7f8;
  --jw-surface: #ffffff;
  --jw-surface-2: rgba(0,0,0,0.035);

  --jw-text: #0b1220;
  --jw-text-muted: rgba(11, 18, 32, 0.72);

  --jw-border-soft: rgba(0,0,0,0.10);

  --jw-shadow-1: 0 1px 4px rgba(0,0,0,0.06);
  --jw-shadow-2: 0 2px 10px rgba(0,0,0,0.14);

  --jw-primary: #004C3F;
  --jw-primary-contrast: #ffffff;

  --jw-secondary: #1E3A5F;
  --jw-accent: #C9A227;             /* derived: warm gold */
  --jw-danger: #C0392B;             /* derived: strong but not neon */

  --jw-success: #2e7d32;
  --jw-warning: #b07b00;
  --jw-info: #111827;

  --jw-overlay-bg: rgba(0,0,0,0.40);

  --jw-toast-text: #ffffff;

  --jw-pill-bg: rgba(0,0,0,0.03);
  --jw-pill-bg-hover: rgba(0,0,0,0.055);
}


/* ===========================================================
   4) CALM (Pastel, soothing)
   Primary:   #A3C4BC
   Secondary: #E6DADA
   Accent: a gentle lavender/rose bridge
   Danger: soft rose-red (not harsh)
   =========================================================== */
:root[data-jw-theme="calm"] {
  --jw-page-bg: #F7F2F1;

  --jw-bg: #FAF6F6;
  --jw-surface: #ffffff;
  --jw-surface-2: rgba(163,196,188,0.18);

  --jw-text: #1f2933;
  --jw-text-muted: rgba(31, 41, 51, 0.72);

  --jw-border-soft: rgba(31,41,51,0.10);

  --jw-shadow-1: 0 1px 4px rgba(0,0,0,0.05);
  --jw-shadow-2: 0 2px 10px rgba(0,0,0,0.12);

  --jw-primary: #A3C4BC;
  --jw-primary-contrast: #0b1220;

  --jw-secondary: #E6DADA;
  --jw-accent: #C9A7B4;             /* derived bridge: calm blush-lavender */
  --jw-danger: #B85C6D;             /* softened danger */

  --jw-success: #3a8f6a;            /* calm green */
  --jw-warning: #B88C5A;            /* soft amber */
  --jw-info: #2b2f33;

  --jw-overlay-bg: rgba(0,0,0,0.38);

  --jw-toast-text: #ffffff;

  --jw-pill-bg: rgba(163,196,188,0.18);
  --jw-pill-bg-hover: rgba(163,196,188,0.26);
}


/* ===========================================================
   5) FRESH (Bright, loud - fruits)
   Primary:   #FF6B00
   Secondary: #00B894
   Accent: punchy berry/purple
   Danger: hot red-orange
   =========================================================== */
:root[data-jw-theme="fresh"] {
  --jw-page-bg: #FFF6EE;

  --jw-bg: #FFF9F3;
  --jw-surface: #ffffff;
  --jw-surface-2: rgba(255,107,0,0.10);

  --jw-text: #1a120a;
  --jw-text-muted: rgba(26, 18, 10, 0.72);

  --jw-border-soft: rgba(26,18,10,0.12);

  --jw-shadow-1: 0 1px 4px rgba(0,0,0,0.06);
  --jw-shadow-2: 0 2px 10px rgba(0,0,0,0.14);

  --jw-primary: #FF6B00;
  --jw-primary-contrast: #ffffff;

  --jw-secondary: #00B894;
  --jw-accent: #7C3AED;             /* derived: berry/purple complements orange+mint */
  --jw-danger: #E11D48;             /* crisp danger */

  --jw-success: #00B894;            /* matches secondary */
  --jw-warning: #F59E0B;            /* bright fruit yellow */
  --jw-info: #111827;

  --jw-overlay-bg: rgba(0,0,0,0.42);

  --jw-toast-text: #ffffff;

  --jw-pill-bg: rgba(255,107,0,0.10);
  --jw-pill-bg-hover: rgba(255,107,0,0.16);
}


/* ===========================================================
   6) NIGHT (Dark blue/purple/violet)
   Primary:   #5B4B8A
   Secondary: #1C2541
   Accent: neon-ish violet-blue highlight
   Danger: magenta-red
   =========================================================== */
:root[data-jw-theme="night"] {
  --jw-page-bg: #070812;

  --jw-bg: #0B0D1B;
  --jw-surface: #12152A;
  --jw-surface-2: rgba(91,75,138,0.18);

  --jw-text: #EDEBFF;
  --jw-text-muted: rgba(237, 235, 255, 0.78);

  --jw-border-soft: rgba(255,255,255,0.12);

  --jw-shadow-1: 0 1px 4px rgba(0,0,0,0.48);
  --jw-shadow-2: 0 2px 10px rgba(0,0,0,0.66);

  --jw-primary: #5B4B8A;
  --jw-primary-contrast: #ffffff;

  --jw-secondary: #1C2541;
  --jw-accent: #8B5CF6;             /* derived: vivid violet accent */
  --jw-danger: #FF2D55;             /* derived: magenta-red */

  --jw-success: #22C55E;
  --jw-warning: #FBBF24;
  --jw-info: #1f2937;

  --jw-overlay-bg: rgba(0,0,0,0.72);

  --jw-toast-text: #ffffff;

  --jw-pill-bg: rgba(255,255,255,0.07);
  --jw-pill-bg-hover: rgba(255,255,255,0.10);
}


/* ===========================================================
   7) FOCUS (Bright, loud yellows/oranges)
   Primary:   #FFC300
   Secondary: #FF5733
   Accent: electric blue for contrast (keeps focus UI crisp)
   Danger: secondary (already strong) slightly deeper
   =========================================================== */
:root[data-jw-theme="focus"] {
  --jw-page-bg: #FFF8D6;

  --jw-bg: #FFFBE6;
  --jw-surface: #ffffff;
  --jw-surface-2: rgba(255,195,0,0.16);

  --jw-text: #1a120a;
  --jw-text-muted: rgba(26, 18, 10, 0.72);

  --jw-border-soft: rgba(26,18,10,0.12);

  --jw-shadow-1: 0 1px 4px rgba(0,0,0,0.06);
  --jw-shadow-2: 0 2px 10px rgba(0,0,0,0.14);

  --jw-primary: #FFC300;
  --jw-primary-contrast: #0b1220;

  --jw-secondary: #FF5733;
  --jw-accent: #2563EB;             /* derived: sharp contrast accent for focus */
  --jw-danger: #E53935;             /* controlled danger */

  --jw-success: #16A34A;
  --jw-warning: #FF5733;            /* use secondary as warning */
  --jw-info: #111827;

  --jw-overlay-bg: rgba(0,0,0,0.44);

  --jw-toast-text: #ffffff;

  --jw-pill-bg: rgba(255,195,0,0.16);
  --jw-pill-bg-hover: rgba(255,195,0,0.24);
}


/* ===========================================================
   8) ENERGY (Luxury metallic)
   Primary:   #C9A227 (Gold)
   Secondary: #0A0A0A (Near Black)
   Accent: platinum/silver highlight
   Danger: rich crimson
   =========================================================== */
:root[data-jw-theme="energy"] {
  --jw-page-bg: #0B0B0B;

  --jw-bg: #0F0F10;
  --jw-surface: #141416;
  --jw-surface-2: rgba(201,162,39,0.16);

  --jw-text: #F5F2E6;
  --jw-text-muted: rgba(245, 242, 230, 0.78);

  --jw-border-soft: rgba(255,255,255,0.12);

  --jw-shadow-1: 0 1px 4px rgba(0,0,0,0.55);
  --jw-shadow-2: 0 2px 10px rgba(0,0,0,0.70);

  --jw-primary: #C9A227;
  --jw-primary-contrast: #0A0A0A;

  --jw-secondary: #0A0A0A;
  --jw-accent: #D1D5DB;             /* platinum/silver */
  --jw-danger: #B91C1C;             /* rich crimson */

  --jw-success: #22C55E;
  --jw-warning: #C9A227;            /* gold warning */
  --jw-info: #1f2937;

  --jw-overlay-bg: rgba(0,0,0,0.72);

  --jw-toast-text: #ffffff;

  --jw-pill-bg: rgba(201,162,39,0.14);
  --jw-pill-bg-hover: rgba(201,162,39,0.22);
}


/* ===========================================================
   9) MINIMAL (Corporate / professional)
   Primary:   #2E2E2E
   Secondary: #9CA3AF
   Accent: cool blue for subtle action clarity
   Danger: deep red (still visible on grayscale)
   =========================================================== */
:root[data-jw-theme="minimal"] {
  --jw-page-bg: #F3F4F6;

  --jw-bg: #F6F7F9;
  --jw-surface: #ffffff;
  --jw-surface-2: rgba(46,46,46,0.06);

  --jw-text: #111111;
  --jw-text-muted: rgba(17, 17, 17, 0.70);

  --jw-border-soft: rgba(0,0,0,0.12);

  --jw-shadow-1: 0 1px 4px rgba(0,0,0,0.06);
  --jw-shadow-2: 0 2px 10px rgba(0,0,0,0.14);

  --jw-primary: #2E2E2E;
  --jw-primary-contrast: #ffffff;

  --jw-secondary: #9CA3AF;
  --jw-accent: #3B82F6;             /* subtle corporate accent */
  --jw-danger: #991B1B;

  --jw-success: #166534;
  --jw-warning: #4B5563;
  --jw-info: #111111;

  --jw-overlay-bg: rgba(0,0,0,0.45);

  --jw-toast-text: #ffffff;

  --jw-pill-bg: rgba(46,46,46,0.05);
  --jw-pill-bg-hover: rgba(46,46,46,0.08);
}


/* ===========================================================
   10) JOURNAL (Paper & ink)
   Primary:   #6B4E3D
   Secondary: #EADBC8
   Accent: deep ink-blue
   Danger: dried-rose red
   =========================================================== */
:root[data-jw-theme="journal"] {
  --jw-page-bg: #F4EBDD;

  --jw-bg: #F7EFE3;
  --jw-surface: #FFF7EA;
  --jw-surface-2: rgba(107,78,61,0.08);

  --jw-text: #1C1A14;
  --jw-text-muted: rgba(28, 26, 20, 0.70);

  --jw-border-soft: rgba(28,26,20,0.10);

  --jw-shadow-1: 0 1px 4px rgba(0,0,0,0.05);
  --jw-shadow-2: 0 2px 10px rgba(0,0,0,0.12);

  --jw-primary: #6B4E3D;
  --jw-primary-contrast: #FFF7EA;

  --jw-secondary: #EADBC8;
  --jw-accent: #1E3A8A;             /* ink-blue accent */
  --jw-danger: #A63A50;             /* dried rose */

  --jw-success: #2F7D55;
  --jw-warning: #B17B2F;
  --jw-info: #2b2f33;

  --jw-overlay-bg: rgba(0,0,0,0.42);

  --jw-toast-text: #ffffff;

  --jw-pill-bg: rgba(107,78,61,0.08);
  --jw-pill-bg-hover: rgba(107,78,61,0.12);
}


/* ===========================================================
   11) SOFT-DARK (Dawn colors)
   Primary:   #2C2F4A
   Secondary: #8B5E83
   Accent: soft peach glow
   Danger: warm rose
   =========================================================== */
:root[data-jw-theme="soft-dark"] {
  --jw-page-bg: #12121A;

  --jw-bg: #171826;
  --jw-surface: #1E2033;
  --jw-surface-2: rgba(139,94,131,0.16);

  --jw-text: #F2EEF8;
  --jw-text-muted: rgba(242, 238, 248, 0.78);

  --jw-border-soft: rgba(255,255,255,0.11);

  --jw-shadow-1: 0 1px 4px rgba(0,0,0,0.42);
  --jw-shadow-2: 0 2px 10px rgba(0,0,0,0.60);

  --jw-primary: #2C2F4A;
  --jw-primary-contrast: #ffffff;

  --jw-secondary: #8B5E83;
  --jw-accent: #F59E90;             /* dawn peach */
  --jw-danger: #E11D48;             /* rose danger */

  --jw-success: #22C55E;
  --jw-warning: #FBBF24;
  --jw-info: #1f2937;

  --jw-overlay-bg: rgba(0,0,0,0.66);

  --jw-toast-text: #ffffff;

  --jw-pill-bg: rgba(255,255,255,0.065);
  --jw-pill-bg-hover: rgba(255,255,255,0.095);
}


/* ===========================================================
   12) EARTH (Bright earth)
   Primary:   #C86B28
   Secondary: #6B8E23
   Accent: sky blue (natural complement), keeps UI lively
   Danger: clay red
   =========================================================== */
:root[data-jw-theme="earth"] {
  --jw-page-bg: #FFF2E6;

  --jw-bg: #FFF6EE;
  --jw-surface: #ffffff;
  --jw-surface-2: rgba(200,107,40,0.12);

  --jw-text: #221a10;
  --jw-text-muted: rgba(34, 26, 16, 0.72);

  --jw-border-soft: rgba(34,26,16,0.11);

  --jw-shadow-1: 0 1px 4px rgba(0,0,0,0.06);
  --jw-shadow-2: 0 2px 10px rgba(0,0,0,0.14);

  --jw-primary: #C86B28;
  --jw-primary-contrast: #ffffff;

  --jw-secondary: #6B8E23;
  --jw-accent: #0EA5E9;             /* sky accent */
  --jw-danger: #B45309;             /* clay red-brown */

  --jw-success: #6B8E23;            /* match secondary */
  --jw-warning: #F59E0B;
  --jw-info: #2b2f33;

  --jw-overlay-bg: rgba(0,0,0,0.44);

  --jw-toast-text: #ffffff;

  --jw-pill-bg: rgba(200,107,40,0.10);
  --jw-pill-bg-hover: rgba(200,107,40,0.16);
}


/* ===========================================================
   13) SLATE (Dull earth / understated)
   Primary:   #5A6B73
   Secondary: #8B8B7A
   Accent: muted teal
   Danger: muted brick
   =========================================================== */
:root[data-jw-theme="slate"] {
  --jw-page-bg: #EEF2F4;

  --jw-bg: #F3F6F7;
  --jw-surface: #ffffff;
  --jw-surface-2: rgba(90,107,115,0.10);

  --jw-text: #0b1220;
  --jw-text-muted: rgba(11, 18, 32, 0.70);

  --jw-border-soft: rgba(0,0,0,0.10);

  --jw-shadow-1: 0 1px 4px rgba(0,0,0,0.06);
  --jw-shadow-2: 0 2px 10px rgba(0,0,0,0.14);

  --jw-primary: #5A6B73;
  --jw-primary-contrast: #ffffff;

  --jw-secondary: #8B8B7A;
  --jw-accent: #2A9D8F;             /* muted teal */
  --jw-danger: #9A3412;             /* muted brick */

  --jw-success: #166534;
  --jw-warning: #6B7280;
  --jw-info: #111827;

  --jw-overlay-bg: rgba(0,0,0,0.42);

  --jw-toast-text: #ffffff;

  --jw-pill-bg: rgba(90,107,115,0.09);
  --jw-pill-bg-hover: rgba(90,107,115,0.14);
}


/* ===========================================================
   14) GENTLE-GREEN (Nature)
   Primary:   #4CAF50
   Secondary: #8D9B6A
   Accent: soft sky blue (fresh outdoors)
   Danger: muted berry
   =========================================================== */
:root[data-jw-theme="gentle-green"] {
  --jw-page-bg: #ECF7EE;

  --jw-bg: #F2FBF4;
  --jw-surface: #ffffff;
  --jw-surface-2: rgba(76,175,80,0.12);

  --jw-text: #0d2017;
  --jw-text-muted: rgba(13, 32, 23, 0.70);

  --jw-border-soft: rgba(13,32,23,0.10);

  --jw-shadow-1: 0 1px 4px rgba(0,0,0,0.06);
  --jw-shadow-2: 0 2px 10px rgba(0,0,0,0.14);

  --jw-primary: #4CAF50;
  --jw-primary-contrast: #ffffff;

  --jw-secondary: #8D9B6A;
  --jw-accent: #38BDF8;             /* soft sky */
  --jw-danger: #BE123C;             /* muted berry */

  --jw-success: #4CAF50;
  --jw-warning: #A16207;
  --jw-info: #111827;

  --jw-overlay-bg: rgba(0,0,0,0.40);

  --jw-toast-text: #ffffff;

  --jw-pill-bg: rgba(76,175,80,0.10);
  --jw-pill-bg-hover: rgba(76,175,80,0.16);
}


/* ===========================================================
   15) HIGH-CONTRAST (Accessibility)
   Primary:   #000000
   Secondary: #FFFFFF
   Accent: strong blue for focus ring / actionable clarity
   Danger: pure red
   =========================================================== */
:root[data-jw-theme="high-contrast"] {
  --jw-page-bg: #ffffff;

  --jw-bg: #ffffff;
  --jw-surface: #ffffff;
  --jw-surface-2: #f2f2f2;

  --jw-text: #000000;
  --jw-text-muted: rgba(0,0,0,0.85);

  --jw-border-soft: #000000;

  --jw-shadow-1: none;
  --jw-shadow-2: none;

  --jw-primary: #000000;
  --jw-primary-contrast: #ffffff;

  --jw-secondary: #ffffff;
  --jw-accent: #0057FF;             /* strong accessible accent */
  --jw-danger: #FF0000;

  --jw-success: #000000;
  --jw-warning: #000000;
  --jw-info: #000000;

  --jw-overlay-bg: rgba(0,0,0,0.70);

  --jw-toast-text: #ffffff;

  --jw-pill-bg: #ffffff;
  --jw-pill-bg-hover: #eaeaea;
}


/* ===========================================================
   16) BLUSH (Subtle Pink) — soft, feminine, gentle
   Primary:   #E8A1B0 (blush pink)
   Secondary: #7A4E8A (soft plum)
   Accent:    #BEE3F8 (airy sky)
   =========================================================== */
:root[data-jw-theme="blush"] {
  --jw-page-bg: #FFF3F6;

  --jw-bg: #FFF7FA;
  --jw-surface: #ffffff;
  --jw-surface-2: rgba(232,161,176,0.14);

  --jw-text: #1f1a1c;
  --jw-text-muted: rgba(31, 26, 28, 0.70);

  --jw-border-soft: rgba(0,0,0,0.10);

  --jw-shadow-1: 0 1px 4px rgba(0,0,0,0.05);
  --jw-shadow-2: 0 2px 10px rgba(0,0,0,0.12);

  --jw-primary: #E8A1B0;
  --jw-primary-contrast: #1a0f12;

  --jw-secondary: #7A4E8A;
  --jw-accent: #BEE3F8;            /* soft airy highlight */
  --jw-danger: #D81B60;            /* rose-red */

  --jw-success: #2E7D32;
  --jw-warning: #B7791F;
  --jw-info: #111827;

  --jw-overlay-bg: rgba(0,0,0,0.42);

  --jw-toast-text: #ffffff;

  --jw-pill-bg: rgba(232,161,176,0.12);
  --jw-pill-bg-hover: rgba(232,161,176,0.18);
}


/* ===========================================================
   17) CRIMSON (Devotion / Resolve) — deep reds, strength
   Primary:   #8B1E2D (crimson)
   Secondary: #3A0F1B (wine)
   Accent:    #C9A227 (muted gold)
   =========================================================== */
:root[data-jw-theme="crimson"] {
  --jw-page-bg: #FAF1F2;          /* soft rose parchment */

  --jw-bg: #FDF5F6;
  --jw-surface: #FFFFFF;
  --jw-surface-2: rgba(139,30,45,0.12);

  /* Text */
  --jw-text: #2A0E13;
  --jw-text-muted: rgba(42, 14, 19, 0.72);

  /* Borders & shadows */
  --jw-border-soft: rgba(42,14,19,0.14);

  --jw-shadow-1: 0 1px 4px rgba(139,30,45,0.18);
  --jw-shadow-2: 0 3px 12px rgba(58,15,27,0.28);

  /* Core palette */
  --jw-primary: #8B1E2D;          /* deep crimson */
  --jw-primary-contrast: #FFFFFF;

  --jw-secondary: #3A0F1B;        /* wine / blood red */
  --jw-accent: #C9A227;           /* muted devotional gold */
  --jw-danger: #6F0F1A;           /* darker crimson */

  /* Status */
  --jw-success: #2F7D55;
  --jw-warning: #C9A227;
  --jw-info: #3A0F1B;

  /* Overlays */
  --jw-overlay-bg: rgba(58,15,27,0.45);

  /* Toasts */
  --jw-toast-text: #FFFFFF;

  /* Pills */
  --jw-pill-bg: rgba(139,30,45,0.12);
  --jw-pill-bg-hover: rgba(139,30,45,0.18);
}



/* ===========================================================
   18) GILDED — Luxury Gold / Purple / Silver (Light)
   =========================================================== */
:root[data-jw-theme="gilded"] {
  /* Page & surfaces */
  --jw-page-bg: #FFF6D8;          /* soft gold canvas */

  --jw-bg: #FFF9E6;
  --jw-surface: #FFFFFF;
  --jw-surface-2: rgba(212,175,55,0.20); /* gold shimmer layer */

  /* Text */
  --jw-text: #2A1A05;             /* deep warm brown */
  --jw-text-muted: rgba(42, 26, 5, 0.70);

  /* Borders & shadows */
  --jw-border-soft: rgba(212,175,55,0.45);

  --jw-shadow-1: 0 1px 4px rgba(212,175,55,0.25);
  --jw-shadow-2: 0 4px 14px rgba(88, 24, 124, 0.25); /* purple glow */

  /* Brand colors */
  --jw-primary: #D4AF37;          /* classic gold */
  --jw-primary-contrast: #2A1A05;

  --jw-secondary: #6A0DAD;        /* royal purple */
  --jw-accent: #C0C0C0;           /* silver highlight */
  --jw-danger: #8B0000;           /* deep ruby */

  /* Status */
  --jw-success: #2E8B57;
  --jw-warning: #D4AF37;
  --jw-info: #4B0082;

  /* Overlays */
  --jw-overlay-bg: rgba(106,13,173,0.35);

  /* Toasts */
  --jw-toast-text: #2A1A05;

  /* Pills */
  --jw-pill-bg: rgba(212,175,55,0.25);
  --jw-pill-bg-hover: rgba(212,175,55,0.35);
}