vagabond-rpg-foundryvtt/styles/scss/_theme-variables.scss

// Vagabond RPG - Theme Variables (CSS Custom Properties)
// ======================================================
// These CSS custom properties enable theme switching.
// The SCSS variables are kept for compile-time calculations (like mix()).
// Runtime theming uses the CSS custom properties.

// ==========================================
// LIGHT THEME (Default - Parchment)
// ==========================================
// This is the default theme, warm parchment colors
// WCAG AA compliant (4.5:1 contrast ratio minimum)

.vagabond {
  // Background colors
  --color-bg-primary: #{$color-parchment};
  --color-bg-secondary: #{$color-parchment-dark};
  --color-bg-tertiary: #{$color-parchment-darker};
  --color-bg-input: #{$color-parchment-light};
  --color-bg-highlight: #{$color-parchment-light};

  // Text colors
  --color-text-primary: #{$color-text-primary};
  --color-text-secondary: #{$color-text-secondary};
  --color-text-muted: #{$color-text-muted};
  --color-text-inverse: #{$color-text-inverse};

  // Accent colors
  --color-accent-primary: #{$color-accent-primary};
  --color-accent-secondary: #{$color-accent-secondary};
  --color-accent-highlight: #{$color-accent-highlight};

  // Semantic colors
  --color-success: #{$color-success};
  --color-danger: #{$color-danger};
  --color-warning: #{$color-warning};
  --color-info: #{$color-info};

  // Stat colors (for visual distinction)
  --color-might: #{$color-might};
  --color-dexterity: #{$color-dexterity};
  --color-awareness: #{$color-awareness};
  --color-reason: #{$color-reason};
  --color-presence: #{$color-presence};
  --color-luck: #{$color-luck};

  // Border colors
  --color-border: #{$color-border};
  --color-border-light: #{$color-border-light};
  --color-border-dark: #{$color-border-dark};

  // Shadows
  --shadow-light: #{$shadow-light};
  --shadow-medium: #{$shadow-medium};
  --shadow-dark: #{$shadow-dark};

  // Resource bar colors (HP, Mana)
  --color-hp-fill: #{$color-danger};
  --color-hp-bg: #{$color-parchment-darker};
  --color-mana-fill: #{$color-reason};
  --color-mana-bg: #{$color-parchment-darker};
  --color-bar-values-bg: rgba(245, 240, 225, 0.85);
  --color-bar-input-bg: rgba(255, 255, 255, 0.9);

  // Type badge backgrounds (mixed with background)
  --color-badge-weapon: #{mix($color-danger, $color-parchment, 15%)};
  --color-badge-armor: #{mix($color-info, $color-parchment, 15%)};
  --color-badge-spell: #{mix($color-reason, $color-parchment, 15%)};
  --color-badge-perk: #{mix($color-success, $color-parchment, 15%)};
  --color-badge-class: #{mix($color-warning, $color-parchment, 15%)};
  --color-badge-feature: #{mix($color-presence, $color-parchment, 15%)};
  --color-badge-ancestry: #{mix($color-luck, $color-parchment, 15%)};
  --color-badge-equipment: #{mix($color-dexterity, $color-parchment, 15%)};
}

// ==========================================
// DARK THEME
// ==========================================
// Dark backgrounds with warm parchment-tinted text
// Maintains the fantasy aesthetic while being easier on eyes
//
// Two application methods:
// 1. Global: body.theme-dark .vagabond - when Foundry's global theme is dark
// 2. Per-sheet: .vagabond.theme-dark - when sheet has theme-dark class (applied by _applyThemeClass)

body.theme-dark .vagabond:not(.theme-light),
.vagabond.theme-dark {
  // Dark background colors (warm-tinted darks)
  --color-bg-primary: #1e1a16;
  --color-bg-secondary: #2a2520;
  --color-bg-tertiary: #36302a;
  --color-bg-input: #252119;
  --color-bg-highlight: #3d362e;

  // Light text colors (parchment-tinted)
  --color-text-primary: #e8dcc8;
  --color-text-secondary: #c4b8a4;
  --color-text-muted: #9a8e7e; // Lightened for WCAG AA contrast (4.5:1)
  --color-text-inverse: #1e1a16;

  // Accent colors (slightly brighter for dark bg)
  --color-accent-primary: #c9682a;
  --color-accent-secondary: #a85a24;
  --color-accent-highlight: #e8a060;

  // Semantic colors (adjusted for dark backgrounds)
  --color-success: #4a9f42;
  --color-danger: #c94444;
  --color-warning: #c99020; // Adjusted for contrast
  --color-info: #4a8080;

  // Stat colors (brighter for dark bg)
  --color-might: #e05050;
  --color-dexterity: #50c050;
  --color-awareness: #6090e0;
  --color-reason: #b060e0;
  --color-presence: #e0b030;
  --color-luck: #40d0d0;

  // Border colors (warm grays)
  --color-border: #5c4a3a;
  --color-border-light: #6d5a4a;
  --color-border-dark: #4a3a2a;

  // Shadows (more pronounced on dark)
  --shadow-light: rgba(0, 0, 0, 0.2);
  --shadow-medium: rgba(0, 0, 0, 0.35);
  --shadow-dark: rgba(0, 0, 0, 0.5);

  // Resource bar colors
  --color-hp-fill: #c94444;
  --color-hp-bg: #2a2520;
  --color-mana-fill: #7050b0;
  --color-mana-bg: #2a2520;
  --color-bar-values-bg: rgba(30, 26, 22, 0.9);
  --color-bar-input-bg: rgba(42, 37, 32, 0.95);

  // Type badge backgrounds (for dark theme)
  --color-badge-weapon: #3d2828;
  --color-badge-armor: #283838;
  --color-badge-spell: #382840;
  --color-badge-perk: #283828;
  --color-badge-class: #383828;
  --color-badge-feature: #383028;
  --color-badge-ancestry: #283838;
  --color-badge-equipment: #283828;
}