/* ═══════════════════════════════════════════════
   themes.css — LuauBlueprint Theme Library
   ───────────────────────────────────────────────
   Each theme sets the full set of CSS variables.
   Add your own theme at the bottom following the
   same pattern: [data-theme="your-theme-name"] {}
   ═══════════════════════════════════════════════ */

/* ════════════════════════════════
   OBSIDIAN (default dark)
   Cool-toned dark, clean and professional.
   ════════════════════════════════ */
[data-theme="obsidian"] {
  --bg-canvas:       #0d1117;
  --bg-surface:      #161c27;
  --surface-hover:   #1e2739;
  --btn-bg:          #1e2739;
  --btn-bg-hover:    #263046;

  --border:          #232e42;
  --border-focus:    #4a80c4;

  --text-primary:    #dde6f0;
  --text-secondary:  #8a9ab5;
  --text-muted:      #4a5a72;
  --text-faint:      #28364d;

  --accent:          #4a80c4;
  --accent-hover:    #5b91d5;
  --accent-fg:       #ddeeff;

  --success-bg:      #0f2e22;
  --success-border:  #1f6645;
  --success-fg:      #4ecb8d;
  --success-hover:   #164033;

  --node-bg:         #161c27;
  --node-border:     #232e42;
  --node-border-hover: #3a4a62;
  --node-shadow:     0 4px 20px rgba(0,0,0,0.4);

  --input-bg:        #0d1117;
  --code-color:      #7ec8a0;

  --canvas-grid:     radial-gradient(#1e2739 1px, transparent 1px);
}

/* ════════════════════════════════
   CHALK
   Light theme — white/warm grey, ink accents.
   ════════════════════════════════ */
[data-theme="chalk"] {
  --bg-canvas:       #f4f3f0;
  --bg-surface:      #fafaf8;
  --surface-hover:   #eeede9;
  --btn-bg:          #edecea;
  --btn-bg-hover:    #e3e2de;

  --border:          #d8d6d0;
  --border-focus:    #3d6bcc;

  --text-primary:    #1a1916;
  --text-secondary:  #524f48;
  --text-muted:      #9e9b92;
  --text-faint:      #ccc9c0;

  --accent:          #3d6bcc;
  --accent-hover:    #2f5ab5;
  --accent-fg:       #ffffff;

  --success-bg:      #edf7f2;
  --success-border:  #9dd3ba;
  --success-fg:      #1e6e47;
  --success-hover:   #dff0e8;

  --node-bg:         #fafaf8;
  --node-border:     #d8d6d0;
  --node-border-hover: #b0ada5;
  --node-shadow:     0 2px 12px rgba(0,0,0,0.08);

  --input-bg:        #f0eeeb;
  --code-color:      #2a6e42;

  --canvas-grid:     radial-gradient(#d4d2cc 1px, transparent 1px);
}

/* ════════════════════════════════
   AMBER
   Warm amber/saffron — retro-editorial feel.
   ════════════════════════════════ */
[data-theme="amber"] {
  --bg-canvas:       #1a1408;
  --bg-surface:      #201a0e;
  --surface-hover:   #2c2312;
  --btn-bg:          #2c2312;
  --btn-bg-hover:    #362b17;

  --border:          #3a2f18;
  --border-focus:    #c9801a;

  --text-primary:    #f0ddb0;
  --text-secondary:  #a8906a;
  --text-muted:      #5a4828;
  --text-faint:      #2e2210;

  --accent:          #c9801a;
  --accent-hover:    #da9020;
  --accent-fg:       #1a1408;

  --success-bg:      #12201a;
  --success-border:  #2a5c40;
  --success-fg:      #5ecb8a;
  --success-hover:   #1a2e22;

  --node-bg:         #201a0e;
  --node-border:     #3a2f18;
  --node-border-hover: #5a4828;
  --node-shadow:     0 4px 20px rgba(0,0,0,0.5);

  --input-bg:        #1a1408;
  --code-color:      #e8a84a;

  --canvas-grid:     radial-gradient(#2c2312 1px, transparent 1px);
}

/* ════════════════════════════════
   SLATE
   Cool grey, nearly-monochrome, minimal.
   ════════════════════════════════ */
[data-theme="slate"] {
  --bg-canvas:       #f1f3f6;
  --bg-surface:      #ffffff;
  --surface-hover:   #e8eaee;
  --btn-bg:          #e8eaee;
  --btn-bg-hover:    #dde0e6;

  --border:          #d0d4dc;
  --border-focus:    #5c6fcc;

  --text-primary:    #1c1e24;
  --text-secondary:  #5a6070;
  --text-muted:      #9aa0b0;
  --text-faint:      #cdd0d8;

  --accent:          #5c6fcc;
  --accent-hover:    #4a5db5;
  --accent-fg:       #ffffff;

  --success-bg:      #eef7f2;
  --success-border:  #a0d4b8;
  --success-fg:      #246b44;
  --success-hover:   #e2f0ea;

  --node-bg:         #ffffff;
  --node-border:     #d0d4dc;
  --node-border-hover: #a0a8b8;
  --node-shadow:     0 2px 10px rgba(0,0,0,0.06);

  --input-bg:        #f4f5f8;
  --code-color:      #346baa;

  --canvas-grid:     radial-gradient(#d0d4dc 1px, transparent 1px);
}

/* ════════════════════════════════
   DUSK
   Purple-leaning dark — muted and warm.
   ════════════════════════════════ */
[data-theme="dusk"] {
  --bg-canvas:       #100e1a;
  --bg-surface:      #17142a;
  --surface-hover:   #201c38;
  --btn-bg:          #201c38;
  --btn-bg-hover:    #2c2648;

  --border:          #2c2648;
  --border-focus:    #8070d0;

  --text-primary:    #e0d8f8;
  --text-secondary:  #9080c0;
  --text-muted:      #4a3e70;
  --text-faint:      #221e38;

  --accent:          #8070d0;
  --accent-hover:    #9080e0;
  --accent-fg:       #ffffff;

  --success-bg:      #102018;
  --success-border:  #286448;
  --success-fg:      #5ec898;
  --success-hover:   #163024;

  --node-bg:         #17142a;
  --node-border:     #2c2648;
  --node-border-hover: #4a3e70;
  --node-shadow:     0 4px 24px rgba(0,0,0,0.5);

  --input-bg:        #100e1a;
  --code-color:      #b09af0;

  --canvas-grid:     radial-gradient(#201c38 1px, transparent 1px);
}

/* ════════════════════════════════
   FOREST
   Deep green, natural and calm.
   ════════════════════════════════ */
[data-theme="forest"] {
  --bg-canvas:       #0b1410;
  --bg-surface:      #101e18;
  --surface-hover:   #162b22;
  --btn-bg:          #162b22;
  --btn-bg-hover:    #1e3a2e;

  --border:          #1e3a2e;
  --border-focus:    #3ea86a;

  --text-primary:    #d0ecd8;
  --text-secondary:  #6a9e7a;
  --text-muted:      #2e5840;
  --text-faint:      #162414;

  --accent:          #3ea86a;
  --accent-hover:    #50b87c;
  --accent-fg:       #0b1410;

  --success-bg:      #0a2016;
  --success-border:  #286840;
  --success-fg:      #60d898;
  --success-hover:   #102c1e;

  --node-bg:         #101e18;
  --node-border:     #1e3a2e;
  --node-border-hover: #2e5840;
  --node-shadow:     0 4px 20px rgba(0,0,0,0.45);

  --input-bg:        #0b1410;
  --code-color:      #80e0a0;

  --canvas-grid:     radial-gradient(#162b22 1px, transparent 1px);
}

/* ════════════════════════════════
   CUSTOM (editable in-app)
   This gets overwritten by the theme editor.
   ════════════════════════════════ */
[data-theme="custom"] {
  --bg-canvas:       #0d1117;
  --bg-surface:      #161c27;
  --surface-hover:   #1e2739;
  --btn-bg:          #1e2739;
  --btn-bg-hover:    #263046;
  --border:          #232e42;
  --border-focus:    #4a80c4;
  --text-primary:    #dde6f0;
  --text-secondary:  #8a9ab5;
  --text-muted:      #4a5a72;
  --text-faint:      #28364d;
  --accent:          #4a80c4;
  --accent-hover:    #5b91d5;
  --accent-fg:       #ddeeff;
  --success-bg:      #0f2e22;
  --success-border:  #1f6645;
  --success-fg:      #4ecb8d;
  --success-hover:   #164033;
  --node-bg:         #161c27;
  --node-border:     #232e42;
  --node-border-hover: #3a4a62;
  --node-shadow:     0 4px 20px rgba(0,0,0,0.4);
  --input-bg:        #0d1117;
  --code-color:      #7ec8a0;
  --canvas-grid:     radial-gradient(#1e2739 1px, transparent 1px);
}

/* ════════════════════════════════
   HOW TO ADD A CUSTOM THEME
   ════════════════════════════════
   
   Copy any block above, change the attribute
   selector to your theme name, and adjust the
   variables. Then in themes.js, add an entry to
   the THEMES array:
   
   { id: 'my-theme', label: 'My Theme', swatch: '#hexcolor' }
   
   The theme will appear in the theme picker
   automatically. That's it.
   ════════════════════════════════ */