/*
 * ClawPad Web Demo -- Theme Overrides
 * Apply via data-theme attribute on the demo shell element.
 *
 * 10 themes total.  starry_night is the default (defined in tokens.css :root)
 * so it is not repeated here.  The remaining 9 themes follow.
 */

/* ═══════════════════════════════════════════════
   1. Champagne Noir  (deco_luxe)
   ═══════════════════════════════════════════════ */
[data-theme="deco_luxe"] {
  /* UI Surface */
  --bg: #0D0D0F;
  --sidebar-bg: #14171C;
  --surface: #1F212E;
  --line: #2D3240;

  /* Text */
  --ink: #F3EEE3;
  --ink-soft: #CBBDA6;
  --ink-muted: #8D846F;
  --brand: #E0BF8C;
  --ink-on-brand: #0D0D0F;

  /* Interactive */
  --hover-bg: #262A36;
  --active-bg: #303544;
  --selection-bg: #3A4153;

  /* Chat */
  --chat-header: #14171C;
  --chat-bg: #0D0D0F;
  --bubble-user: #2A2F3E;
  --bubble-user-text: #F3EEE3;
  --bubble-ai: #1A1D27;
  --bubble-ai-text: #F3EEE3;
  --timestamp: #CBBDA6;

  /* Input */
  --input-bg: #1A1D27;
  --input-border: #2D3240;
  --input-text: #F3EEE3;
  --input-placeholder: #AFA38E;
  --input-focus: #E0BF8C;

  /* Buttons */
  --btn-primary: #8B6B45;
  --btn-primary-hover: #A98456;
  --btn-primary-text: #F8F3E9;
  --btn-secondary: #14171C;
  --btn-secondary-hover: #212734;
  --btn-secondary-text: #F3EEE3;
  --btn-danger: #C85E5E;
  --btn-danger-hover: #DB7777;
  --btn-danger-text: #F8F3E9;
  --icon-color: #BEB19A;
  --icon-hover: #F3EEE3;

  /* Status */
  --ok: #49C98A;
  --warn: #E0BF8C;
  --danger: #DB7777;
  --info: #92B7E3;

  /* Computed */
  --bloom-a: rgba(224, 191, 140, 0.08);
  --bloom-b: rgba(224, 191, 140, 0.04);
  --shadow: rgba(13, 13, 15, 0.5);
  --shadow-light: rgba(13, 13, 15, 0.25);

  /* Glassmorphism */
  --glass-bg: rgba(20, 23, 28, 0.72);
  --glass-border: rgba(255, 255, 255, 0.06);
  --glass-bg-heavy: rgba(20, 23, 28, 0.88);

  /* Gradients */
  --gradient-brand: linear-gradient(135deg, #E0BF8C 0%, #C5A46E 100%);
  --gradient-surface: linear-gradient(180deg, #1F212E 0%, #0D0D0F 100%);
  --gradient-user-bubble: linear-gradient(135deg, #2A2F3E 0%, #222736 100%);
  --gradient-body: linear-gradient(180deg, #131517 0%, #0D0D0F 40%, #090909 100%);

  /* Enhanced Shadows */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.2), 0 1px 2px rgba(0, 0, 0, 0.15);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.25), 0 2px 4px rgba(0, 0, 0, 0.15);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.35), 0 4px 8px rgba(0, 0, 0, 0.2);
  --shadow-glow: 0 4px 24px rgba(224, 191, 140, 0.2), 0 0 8px rgba(224, 191, 140, 0.1);
}

/* ═══════════════════════════════════════════════
   2. Graphite Steel  (crimson_ink)
   ═══════════════════════════════════════════════ */
[data-theme="crimson_ink"] {
  /* UI Surface */
  --bg: #0F1012;
  --sidebar-bg: #171A1E;
  --surface: #20252B;
  --line: #2C333B;

  /* Text */
  --ink: #ECEFF3;
  --ink-soft: #B2BBC6;
  --ink-muted: #7C8794;
  --brand: #BFC7D1;
  --ink-on-brand: #0F1012;

  /* Interactive */
  --hover-bg: #2A3038;
  --active-bg: #313844;
  --selection-bg: #3A4452;

  /* Chat */
  --chat-header: #171A1E;
  --chat-bg: #0F1012;
  --bubble-user: #2D343E;
  --bubble-user-text: #ECEFF3;
  --bubble-ai: #1C2128;
  --bubble-ai-text: #ECEFF3;
  --timestamp: #B2BBC6;

  /* Input */
  --input-bg: #1C2128;
  --input-border: #2C333B;
  --input-text: #ECEFF3;
  --input-placeholder: #9AA5B2;
  --input-focus: #BFC7D1;

  /* Buttons */
  --btn-primary: #5B6573;
  --btn-primary-hover: #737E8E;
  --btn-primary-text: #ECEFF3;
  --btn-secondary: #171A1E;
  --btn-secondary-hover: #242A33;
  --btn-secondary-text: #ECEFF3;
  --btn-danger: #D05A5A;
  --btn-danger-hover: #E07878;
  --btn-danger-text: #ECEFF3;
  --icon-color: #A7B1BD;
  --icon-hover: #ECEFF3;

  /* Status */
  --ok: #4CCB84;
  --warn: #E7BE63;
  --danger: #E07878;
  --info: #93BDE6;

  /* Computed */
  --bloom-a: rgba(191, 199, 209, 0.08);
  --bloom-b: rgba(191, 199, 209, 0.04);
  --shadow: rgba(15, 16, 18, 0.5);
  --shadow-light: rgba(15, 16, 18, 0.25);

  /* Glassmorphism */
  --glass-bg: rgba(23, 26, 30, 0.72);
  --glass-border: rgba(255, 255, 255, 0.06);
  --glass-bg-heavy: rgba(23, 26, 30, 0.88);

  /* Gradients */
  --gradient-brand: linear-gradient(135deg, #BFC7D1 0%, #A4ACB6 100%);
  --gradient-surface: linear-gradient(180deg, #20252B 0%, #0F1012 100%);
  --gradient-user-bubble: linear-gradient(135deg, #2D343E 0%, #252C36 100%);
  --gradient-body: linear-gradient(180deg, #15181A 0%, #0F1012 40%, #0B0C0E 100%);

  /* Enhanced Shadows */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.2), 0 1px 2px rgba(0, 0, 0, 0.15);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.25), 0 2px 4px rgba(0, 0, 0, 0.15);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.35), 0 4px 8px rgba(0, 0, 0, 0.2);
  --shadow-glow: 0 4px 24px rgba(191, 199, 209, 0.2), 0 0 8px rgba(191, 199, 209, 0.1);
}

/* ═══════════════════════════════════════════════
   3. Starry Night  (starry_night) -- DEFAULT
   Defined in tokens.css :root, not repeated here.
   ═══════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════
   4. Royal Indigo  (violet_synth)
   ═══════════════════════════════════════════════ */
[data-theme="violet_synth"] {
  /* UI Surface */
  --bg: #0E1020;
  --sidebar-bg: #171A2D;
  --surface: #20243A;
  --line: #232756;

  /* Text */
  --ink: #E7E9F4;
  --ink-soft: #9CA2C9;
  --ink-muted: #5c607d;
  --brand: #7C86FF;
  --ink-on-brand: #ffffff;

  /* Interactive */
  --hover-bg: #2C314A;
  --active-bg: #303345;
  --selection-bg: #2d325b;

  /* Chat */
  --chat-header: #171A2D;
  --chat-bg: #0E1020;
  --bubble-user: #252A4A;
  --bubble-user-text: #E7E9F4;
  --bubble-ai: #15182A;
  --bubble-ai-text: #E7E9F4;
  --timestamp: #9CA2C9;

  /* Input */
  --input-bg: #1C1F32;
  --input-border: #232756;
  --input-text: #E7E9F4;
  --input-placeholder: #9CA2C9;
  --input-focus: #7C86FF;

  /* Buttons */
  --btn-primary: #636EFF;
  --btn-primary-hover: #7f88ff;
  --btn-primary-text: #ffffff;
  --btn-secondary: #171A2D;
  --btn-secondary-hover: #232639;
  --btn-secondary-text: #E7E9F4;
  --btn-danger: #FF5E5E;
  --btn-danger-hover: #ff7b7b;
  --btn-danger-text: #ffffff;
  --icon-color: #949AC1;
  --icon-hover: #DBDDE8;

  /* Status */
  --ok: #3CCF7A;
  --warn: #F5B54A;
  --danger: #FF5E5E;
  --info: #7C86FF;

  /* Computed */
  --bloom-a: rgba(124, 134, 255, 0.08);
  --bloom-b: rgba(124, 134, 255, 0.04);
  --shadow: rgba(14, 16, 32, 0.5);
  --shadow-light: rgba(14, 16, 32, 0.25);

  /* Glassmorphism */
  --glass-bg: rgba(23, 26, 45, 0.72);
  --glass-border: rgba(255, 255, 255, 0.06);
  --glass-bg-heavy: rgba(23, 26, 45, 0.88);

  /* Gradients */
  --gradient-brand: linear-gradient(135deg, #7C86FF 0%, #636EFF 100%);
  --gradient-surface: linear-gradient(180deg, #20243A 0%, #0E1020 100%);
  --gradient-user-bubble: linear-gradient(135deg, #252A4A 0%, #1D2242 100%);
  --gradient-body: linear-gradient(180deg, #141828 0%, #0E1020 40%, #0A0C1A 100%);

  /* Enhanced Shadows */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.2), 0 1px 2px rgba(0, 0, 0, 0.15);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.25), 0 2px 4px rgba(0, 0, 0, 0.15);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.35), 0 4px 8px rgba(0, 0, 0, 0.2);
  --shadow-glow: 0 4px 24px rgba(124, 134, 255, 0.2), 0 0 8px rgba(124, 134, 255, 0.1);
}

/* ═══════════════════════════════════════════════
   5. Klimt Golden  (solar_sepia)
   ═══════════════════════════════════════════════ */
[data-theme="solar_sepia"] {
  /* UI Surface */
  --bg: #1A1510;
  --sidebar-bg: #2D2416;
  --surface: #3D3220;
  --line: #8B6914;

  /* Text */
  --ink: #F5E6C8;
  --ink-soft: #D5B446;
  --ink-muted: #A9956D;
  --brand: #FFD700;
  --ink-on-brand: #1A1510;

  /* Interactive */
  --hover-bg: #473A28;
  --active-bg: #4B3D2A;
  --selection-bg: #54452F;

  /* Chat */
  --chat-header: #2D2416;
  --chat-bg: #1A1510;
  --bubble-user: #4D3A20;
  --bubble-user-text: #F5E6C8;
  --bubble-ai: #2D2416;
  --bubble-ai-text: #F5E6C8;
  --timestamp: #D5B446;

  /* Input */
  --input-bg: #3D3220;
  --input-border: #8B6914;
  --input-text: #F5E6C8;
  --input-placeholder: #A9956D;
  --input-focus: #FFD700;

  /* Buttons */
  --btn-primary: #8B6914;
  --btn-primary-hover: #956E16;
  --btn-primary-text: #FFFFFF;
  --btn-secondary: #2D2416;
  --btn-secondary-hover: #3D3220;
  --btn-secondary-text: #FFD700;
  --btn-danger: #8B0000;
  --btn-danger-hover: #A01010;
  --btn-danger-text: #FFD700;
  --icon-color: #C9A227;
  --icon-hover: #FFD700;

  /* Status */
  --ok: #50C878;
  --warn: #FFD700;
  --danger: #8B0000;
  --info: #C9A227;

  /* Computed */
  --bloom-a: rgba(255, 215, 0, 0.08);
  --bloom-b: rgba(255, 215, 0, 0.04);
  --shadow: rgba(26, 21, 16, 0.5);
  --shadow-light: rgba(26, 21, 16, 0.25);

  /* Glassmorphism */
  --glass-bg: rgba(45, 36, 22, 0.72);
  --glass-border: rgba(255, 255, 255, 0.06);
  --glass-bg-heavy: rgba(45, 36, 22, 0.88);

  /* Gradients */
  --gradient-brand: linear-gradient(135deg, #FFD700 0%, #8B6914 100%);
  --gradient-surface: linear-gradient(180deg, #3D3220 0%, #1A1510 100%);
  --gradient-user-bubble: linear-gradient(135deg, #4D3A20 0%, #3D2D18 100%);
  --gradient-body: linear-gradient(180deg, #241D16 0%, #1A1510 40%, #120F0B 100%);

  /* Enhanced Shadows */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.2), 0 1px 2px rgba(0, 0, 0, 0.15);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.25), 0 2px 4px rgba(0, 0, 0, 0.15);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.35), 0 4px 8px rgba(0, 0, 0, 0.2);
  --shadow-glow: 0 4px 24px rgba(255, 215, 0, 0.2), 0 0 8px rgba(255, 215, 0, 0.1);
}

/* ═══════════════════════════════════════════════
   6. Aurora Teal  (forest_terminal)
   ═══════════════════════════════════════════════ */
[data-theme="forest_terminal"] {
  /* UI Surface */
  --bg: #0F1416;
  --sidebar-bg: #162024;
  --surface: #1D2A2F;
  --line: #1F2E33;

  /* Text */
  --ink: #E1F0EF;
  --ink-soft: #7FA1A3;
  --ink-muted: #4d6264;
  --brand: #3EC7B4;
  --ink-on-brand: #ffffff;

  /* Interactive */
  --hover-bg: #283741;
  --active-bg: #2e393c;
  --selection-bg: #1f4544;

  /* Chat */
  --chat-header: #162024;
  --chat-bg: #0F1416;
  --bubble-user: #1E3438;
  --bubble-user-text: #E1F0EF;
  --bubble-ai: #141E21;
  --bubble-ai-text: #E1F0EF;
  --timestamp: #7FA1A3;

  /* Input */
  --input-bg: #1B2529;
  --input-border: #1F2E33;
  --input-text: #E1F0EF;
  --input-placeholder: #7FA1A3;
  --input-focus: #3EC7B4;

  /* Buttons */
  --btn-primary: #2FA99A;
  --btn-primary-hover: #54b8ac;
  --btn-primary-text: #ffffff;
  --btn-secondary: #162024;
  --btn-secondary-hover: #222c30;
  --btn-secondary-text: #E1F0EF;
  --btn-danger: #FF6B6B;
  --btn-danger-hover: #ff8686;
  --btn-danger-text: #ffffff;
  --icon-color: #77999B;
  --icon-hover: #D5E4E3;

  /* Status */
  --ok: #3CCF7A;
  --warn: #F5B54A;
  --danger: #FF6B6B;
  --info: #3EC7B4;

  /* Computed */
  --bloom-a: rgba(62, 199, 180, 0.08);
  --bloom-b: rgba(62, 199, 180, 0.04);
  --shadow: rgba(15, 20, 22, 0.5);
  --shadow-light: rgba(15, 20, 22, 0.25);

  /* Glassmorphism */
  --glass-bg: rgba(22, 32, 36, 0.72);
  --glass-border: rgba(255, 255, 255, 0.06);
  --glass-bg-heavy: rgba(22, 32, 36, 0.88);

  /* Gradients */
  --gradient-brand: linear-gradient(135deg, #3EC7B4 0%, #2FA99A 100%);
  --gradient-surface: linear-gradient(180deg, #1D2A2F 0%, #0F1416 100%);
  --gradient-user-bubble: linear-gradient(135deg, #1E3438 0%, #162C30 100%);
  --gradient-body: linear-gradient(180deg, #151C1E 0%, #0F1416 40%, #0B1012 100%);

  /* Enhanced Shadows */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.2), 0 1px 2px rgba(0, 0, 0, 0.15);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.25), 0 2px 4px rgba(0, 0, 0, 0.15);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.35), 0 4px 8px rgba(0, 0, 0, 0.2);
  --shadow-glow: 0 4px 24px rgba(62, 199, 180, 0.2), 0 0 8px rgba(62, 199, 180, 0.1);
}

/* ═══════════════════════════════════════════════
   7. Forest Royale  (metallic_aurora)
   ═══════════════════════════════════════════════ */
[data-theme="metallic_aurora"] {
  /* UI Surface */
  --bg: #121F17;
  --sidebar-bg: #1A2A20;
  --surface: #214133;
  --line: #5C7D68;

  /* Text */
  --ink: #F1F6F1;
  --ink-soft: #B8C8BD;
  --ink-muted: #7E9689;
  --brand: #D4B333;
  --ink-on-brand: #1B180D;

  /* Interactive */
  --hover-bg: #35684F;
  --active-bg: #3B7357;
  --selection-bg: #345F4A;

  /* Chat */
  --chat-header: #1A2A20;
  --chat-bg: #121F17;
  --bubble-user: #234636;
  --bubble-user-text: #F1F6F1;
  --bubble-ai: #183126;
  --bubble-ai-text: #F1F6F1;
  --timestamp: #8FA99A;

  /* Input */
  --input-bg: #1B3428;
  --input-border: #4F6E5A;
  --input-text: #F1F6F1;
  --input-placeholder: #95AEA1;
  --input-focus: #D4B333;

  /* Buttons */
  --btn-primary: #2F7A4F;
  --btn-primary-hover: #276341;
  --btn-primary-text: #FFFFFF;
  --btn-secondary: #20382C;
  --btn-secondary-hover: #2A4A39;
  --btn-secondary-text: #F1F6F1;
  --btn-danger: #C94E4E;
  --btn-danger-hover: #AD3F3F;
  --btn-danger-text: #FFFFFF;
  --icon-color: #9CB2A5;
  --icon-hover: #F1F6F1;

  /* Status */
  --ok: #45B26A;
  --warn: #D4B333;
  --danger: #D95A5A;
  --info: #4FB3FF;

  /* Computed */
  --bloom-a: rgba(212, 179, 51, 0.08);
  --bloom-b: rgba(212, 179, 51, 0.04);
  --shadow: rgba(18, 31, 23, 0.5);
  --shadow-light: rgba(18, 31, 23, 0.25);

  /* Glassmorphism */
  --glass-bg: rgba(26, 42, 32, 0.72);
  --glass-border: rgba(255, 255, 255, 0.06);
  --glass-bg-heavy: rgba(26, 42, 32, 0.88);

  /* Gradients */
  --gradient-brand: linear-gradient(135deg, #D4B333 0%, #BF9E1E 100%);
  --gradient-surface: linear-gradient(180deg, #214133 0%, #121F17 100%);
  --gradient-user-bubble: linear-gradient(135deg, #234636 0%, #1B3E2E 100%);
  --gradient-body: linear-gradient(180deg, #18271F 0%, #121F17 40%, #0E1B13 100%);

  /* Enhanced Shadows */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.2), 0 1px 2px rgba(0, 0, 0, 0.15);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.25), 0 2px 4px rgba(0, 0, 0, 0.15);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.35), 0 4px 8px rgba(0, 0, 0, 0.2);
  --shadow-glow: 0 4px 24px rgba(212, 179, 51, 0.2), 0 0 8px rgba(212, 179, 51, 0.1);
}

/* ═══════════════════════════════════════════════
   8. Royal Sapphire  (royal_sapphire)
   ═══════════════════════════════════════════════ */
[data-theme="royal_sapphire"] {
  /* UI Surface */
  --bg: #081F36;
  --sidebar-bg: #0D294C;
  --surface: #123870;
  --line: #2C4F7E;

  /* Text */
  --ink: #F2FAFF;
  --ink-soft: #B7CAE3;
  --ink-muted: #738AA8;
  --brand: #99CCFF;
  --ink-on-brand: #081F36;

  /* Interactive */
  --hover-bg: #1A4A86;
  --active-bg: #1F569C;
  --selection-bg: #214876;

  /* Chat */
  --chat-header: #0C2543;
  --chat-bg: #081F36;
  --bubble-user: #123870;
  --bubble-user-text: #F2FAFF;
  --bubble-ai: #0D294C;
  --bubble-ai-text: #F2FAFF;
  --timestamp: #A7BDD8;

  /* Input */
  --input-bg: #0F2E55;
  --input-border: #2C4F7E;
  --input-text: #F2FAFF;
  --input-placeholder: #90A9C6;
  --input-focus: #99CCFF;

  /* Buttons */
  --btn-primary: #1A5AA6;
  --btn-primary-hover: #2370C7;
  --btn-primary-text: #F2FAFF;
  --btn-secondary: #0F2E55;
  --btn-secondary-hover: #1A3E69;
  --btn-secondary-text: #F2FAFF;
  --btn-danger: #E64D4D;
  --btn-danger-hover: #F06B6B;
  --btn-danger-text: #F2FAFF;
  --icon-color: #A7BDD8;
  --icon-hover: #F2FAFF;

  /* Status */
  --ok: #3FD9A0;
  --warn: #F5C76B;
  --danger: #E64D4D;
  --info: #7AB8FF;

  /* Computed */
  --bloom-a: rgba(153, 204, 255, 0.08);
  --bloom-b: rgba(153, 204, 255, 0.04);
  --shadow: rgba(8, 31, 54, 0.5);
  --shadow-light: rgba(8, 31, 54, 0.25);

  /* Glassmorphism */
  --glass-bg: rgba(13, 41, 76, 0.72);
  --glass-border: rgba(255, 255, 255, 0.06);
  --glass-bg-heavy: rgba(13, 41, 76, 0.88);

  /* Gradients */
  --gradient-brand: linear-gradient(135deg, #99CCFF 0%, #7AB8FF 100%);
  --gradient-surface: linear-gradient(180deg, #123870 0%, #081F36 100%);
  --gradient-user-bubble: linear-gradient(135deg, #123870 0%, #0A3068 100%);
  --gradient-body: linear-gradient(180deg, #0E273E 0%, #081F36 40%, #041730 100%);

  /* Enhanced Shadows */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.2), 0 1px 2px rgba(0, 0, 0, 0.15);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.25), 0 2px 4px rgba(0, 0, 0, 0.15);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.35), 0 4px 8px rgba(0, 0, 0, 0.2);
  --shadow-glow: 0 4px 24px rgba(153, 204, 255, 0.2), 0 0 8px rgba(153, 204, 255, 0.1);
}

/* ═══════════════════════════════════════════════
   9. Monet Lilies  (monet_lilies)  -- LIGHT THEME
   ═══════════════════════════════════════════════ */
[data-theme="monet_lilies"] {
  /* UI Surface */
  --bg: #B9CEC6;
  --sidebar-bg: #D3E2DB;
  --surface: #E2EEE8;
  --line: #6E9388;

  /* Text */
  --ink: #1E3A35;
  --ink-soft: #2B554D;
  --ink-muted: #416A61;
  --brand: #9E4768;
  --ink-on-brand: #FFFFFF;

  /* Interactive */
  --hover-bg: #B5D0C6;
  --active-bg: #BED7CE;
  --selection-bg: #93BDB1;

  /* Chat */
  --chat-header: #CBDCD4;
  --chat-bg: #C0D3CB;
  --bubble-user: #A9CABC;
  --bubble-user-text: #1F3D37;
  --bubble-ai: #ECF3EF;
  --bubble-ai-text: #23433C;
  --timestamp: #3F655C;

  /* Input */
  --input-bg: #E8F0EB;
  --input-border: #6E9388;
  --input-text: #1F3D37;
  --input-placeholder: #4D756B;
  --input-focus: #9E4768;

  /* Buttons */
  --btn-primary: #A84D72;
  --btn-primary-hover: #8E3F61;
  --btn-primary-text: #FFFFFF;
  --btn-secondary: #DDEAE4;
  --btn-secondary-hover: #C0D9D0;
  --btn-secondary-text: #1F413A;
  --btn-danger: #C94B53;
  --btn-danger-hover: #AD3C44;
  --btn-danger-text: #FFFFFF;
  --icon-color: #3F665C;
  --icon-hover: #1D3A34;

  /* Status */
  --ok: #2A704D;
  --warn: #9A5E20;
  --danger: #B83F49;
  --info: #2E6F9A;

  /* Computed */
  --bloom-a: rgba(158, 71, 104, 0.08);
  --bloom-b: rgba(158, 71, 104, 0.04);
  --shadow: rgba(30, 58, 53, 0.15);
  --shadow-light: rgba(30, 58, 53, 0.08);

  /* Glassmorphism -- light-adapted */
  --glass-bg: rgba(211, 226, 219, 0.82);
  --glass-border: rgba(0, 0, 0, 0.08);
  --glass-bg-heavy: rgba(211, 226, 219, 0.92);

  /* Gradients */
  --gradient-brand: linear-gradient(135deg, #B86482 0%, #9E4768 100%);
  --gradient-surface: linear-gradient(180deg, #E2EEE8 0%, #B9CEC6 100%);
  --gradient-user-bubble: linear-gradient(135deg, #A9CABC 0%, #9FC2B4 100%);
  --gradient-body: linear-gradient(180deg, #BFD6CE 0%, #B9CEC6 40%, #B1C6BE 100%);

  /* Enhanced Shadows -- light-adapted */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.08);
  --shadow-glow: 0 4px 24px rgba(158, 71, 104, 0.15), 0 0 8px rgba(158, 71, 104, 0.08);

  /* Code blocks -- light-adapted */
  --code-bg: rgba(0, 0, 0, 0.06);
}

/* ═══════════════════════════════════════════════
   10. Paper Beige  (code_noir)  -- LIGHT THEME
   ═══════════════════════════════════════════════ */
[data-theme="code_noir"] {
  /* UI Surface */
  --bg: #F6F1E8;
  --sidebar-bg: #FDFBF6;
  --surface: #F7EFE3;
  --line: #E3DACB;

  /* Text */
  --ink: #3B3127;
  --ink-soft: #8A7A68;
  --ink-muted: #bbb0a2;
  --brand: #C06A30;
  --ink-on-brand: #ffffff;

  /* Interactive */
  --hover-bg: #EDDCC3;
  --active-bg: #EBDAC4;
  --selection-bg: #F5DFC8;

  /* Chat */
  --chat-header: #FBF8F2;
  --chat-bg: #F6F1E8;
  --bubble-user: #F2E5D0;
  --bubble-user-text: #3B3127;
  --bubble-ai: #F9F4EB;
  --bubble-ai-text: #3B3127;
  --timestamp: #8A7A68;

  /* Input */
  --input-bg: #F7F4EE;
  --input-border: #E3DACB;
  --input-text: #3B3127;
  --input-placeholder: #8A7A68;
  --input-focus: #D4854A;

  /* Buttons */
  --btn-primary: #C47038;
  --btn-primary-hover: #A85E2E;
  --btn-primary-text: #ffffff;
  --btn-secondary: #FBF8F2;
  --btn-secondary-hover: #F0E2CE;
  --btn-secondary-text: #3B3127;
  --btn-danger: #C24141;
  --btn-danger-hover: #9f3535;
  --btn-danger-text: #ffffff;
  --icon-color: #928270;
  --icon-hover: #473D33;

  /* Status */
  --ok: #16A34A;
  --warn: #D97706;
  --danger: #C24141;
  --info: #D4854A;

  /* Computed */
  --bloom-a: rgba(212, 133, 74, 0.08);
  --bloom-b: rgba(212, 133, 74, 0.04);
  --shadow: rgba(59, 49, 39, 0.12);
  --shadow-light: rgba(59, 49, 39, 0.06);

  /* Glassmorphism -- light-adapted */
  --glass-bg: rgba(253, 251, 246, 0.82);
  --glass-border: rgba(0, 0, 0, 0.08);
  --glass-bg-heavy: rgba(253, 251, 246, 0.92);

  /* Gradients */
  --gradient-brand: linear-gradient(135deg, #D4854A 0%, #C06A30 100%);
  --gradient-surface: linear-gradient(180deg, #F7EFE3 0%, #F6F1E8 100%);
  --gradient-user-bubble: linear-gradient(135deg, #F2E5D0 0%, #EADDC8 100%);
  --gradient-body: linear-gradient(180deg, #F8F5F0 0%, #F6F1E8 40%, #F2EDE4 100%);

  /* Enhanced Shadows -- light-adapted */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.05);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.1), 0 4px 8px rgba(0, 0, 0, 0.06);
  --shadow-glow: 0 4px 24px rgba(212, 133, 74, 0.12), 0 0 8px rgba(212, 133, 74, 0.06);

  /* Code blocks -- light-adapted */
  --code-bg: rgba(0, 0, 0, 0.06);
}