/* ReMind — theme variable blocks (tách từ styles.css để workflow.css /
   w.html dùng chung). Load TRƯỚC styles.css. Chỉ chứa biến --xxx theo theme. */

:root, [data-theme="modern"] {
  /* Modern paper — warm off-white, gentle warmth, never glaring.
     High L with moderate hue warmth so it reads as light paper
     rather than bright screen. */
  --bg: #e8e2cf;
  --bg-elev: #ddd6c0;
  --panel: #f1ecd9;
  --panel-2: #e1dbc6;
  --panel-hover: #d4ceb8;
  --border: #c1bba6;
  --border-strong: #9d967f;
  --text: #2c2820;
  --text-soft: #555041;
  --text-muted: #877f6c;
  --accent: #5d7466;             /* muted sage */
  --accent-2: #87a092;
  --accent-soft: #dfe4d4;
  --accent-hover: #4d6356;
  --danger: #9d4848;
  --warning: #ab7d23;
  --success: #587b5d;

  --shadow-sm: 0 1px 2px rgba(60,50,30,0.06), 0 1px 1px rgba(60,50,30,0.04);
  --shadow: 0 4px 14px rgba(60,50,30,0.09), 0 1px 3px rgba(60,50,30,0.05);
  --shadow-lg: 0 20px 50px rgba(60,50,30,0.16), 0 8px 20px rgba(60,50,30,0.08);
  --node-shadow: 0 1px 0 rgba(140,130,100,0.18), 0 4px 10px rgba(60,50,30,0.09), 0 2px 4px rgba(60,50,30,0.06);
  --node-shadow-hover: 0 1px 0 rgba(140,130,100,0.18), 0 10px 24px rgba(60,50,30,0.16), 0 4px 10px rgba(60,50,30,0.09);

  --grid: rgba(110,100,70,0.10);
  --grid-strong: rgba(110,100,70,0.20);
  --edge: #998d6a;

  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 14px;

  --font-ui: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-node: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-headline: 'Inter', sans-serif;

  --node-radius: 10px;
  --node-border-width: 2px;

  /* Very subtle neutral fiber grain */
  --grain-pattern: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.92' numOctaves='2' seed='5' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.25  0 0 0 0 0.24  0 0 0 0 0.22  0 0 0 0.025 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

[data-theme="vintage"] {
  /* 80s–90s paper — warm aged cream like the museum-presentation
     reference. Light enough to not feel dark, warm enough to read
     as paper, never glares. */
  --bg: #e5dbbf;
  --bg-elev: #d8cda9;
  --panel: #ece2c7;
  --panel-2: #ddd2b3;
  --panel-hover: #d0c49d;
  --border: #b9a577;
  --border-strong: #8c764a;
  --text: #322410;
  --text-soft: #543e17;
  --text-muted: #786432;
  --accent: #6e3018;             /* muted sepia ink */
  --accent-2: #8c4d26;
  --accent-soft: #e1d2ab;
  --accent-hover: #582512;
  --danger: #903024;
  --warning: #a36918;
  --success: #5b6c35;

  --shadow-sm: 0 1px 2px rgba(60,40,10,0.14);
  --shadow: 0 4px 14px rgba(60,40,10,0.18);
  --shadow-lg: 0 18px 40px rgba(60,40,10,0.24);
  --node-shadow: 0 1px 0 rgba(100,70,20,0.30), 0 2px 4px rgba(60,40,10,0.16), 0 6px 12px rgba(60,40,10,0.14);
  --node-shadow-hover: 0 1px 0 rgba(100,70,20,0.30), 0 4px 8px rgba(60,40,10,0.20), 0 10px 24px rgba(60,40,10,0.20);

  --grid: rgba(110,75,25,0.18);
  --grid-strong: rgba(110,75,25,0.30);
  --edge: #6e5224;

  --radius-sm: 3px;
  --radius: 4px;
  --radius-lg: 6px;

  --font-ui: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-node: 'Lora', 'Georgia', 'Times New Roman', serif;
  --font-headline: 'Special Elite', 'Lora', 'Courier New', serif;

  --node-radius: 3px;
  --node-border-width: 1.5px;

  /* Lightest brown specks — barely-there aging */
  --grain-pattern: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.78' numOctaves='2' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0.22 0 0 0 0.04  0.16 0.08 0 0 0.02  0.10 0.05 0 0 0  0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

[data-theme="dark"] {
  --bg: #0a0d18;
  --bg-elev: #11162a;
  --panel: #161b2e;
  --panel-2: #1d2238;
  --panel-hover: #232a44;
  --border: #2a3048;
  --border-strong: #353c58;
  --text: #ecf0fa;
  --text-soft: #b5becf;
  --text-muted: #7e879b;
  --accent: #7a8cff;
  --accent-2: #b48aff;
  --accent-soft: #1f2348;
  --accent-hover: #8d9dff;
  --danger: #ff6b6b;
  --warning: #f0a020;
  --success: #2bb673;

  --grid: rgba(180,190,220,0.06);
  --grid-strong: rgba(180,190,220,0.16);
  --edge: #5d6884;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
  --shadow: 0 4px 18px rgba(0,0,0,0.45), 0 1px 3px rgba(0,0,0,0.3);
  --shadow-lg: 0 20px 50px rgba(0,0,0,0.6);
  --node-shadow: 0 2px 8px rgba(0,0,0,0.4);
  --node-shadow-hover: 0 8px 24px rgba(0,0,0,0.55);

  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 14px;

  --font-ui: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-node: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-headline: 'Inter', sans-serif;

  --node-radius: 10px;
  --node-border-width: 2px;

  --grain-pattern: none;
}