/* ============================================================================ TSI Design Tokens v2.1.0 2026-04-04 SINGLE SOURCE OF TRUTH for all CSS custom properties across the TSI App. Every page (219 total) should reference these tokens via the --tsi-* prefix. REPLACES / CONSOLIDATES: - assets/css/tsi-design-system.css (81 vars, --tsi-* prefix) - css/sound-harvester.css (312 vars, --sh-* prefix) - config/themes.json (6 species themes) - Inline :root blocks scattered across ~68% of HTML pages USAGE: 1. Link this file FIRST in every , before any other stylesheet: 2. Reference tokens in component CSS: background: var(--tsi-bg); color: var(--tsi-text); 3. For species theming, set data-species on or : Then use --tsi-species-* tokens in component styles. RULES: - ALL new custom properties MUST use the --tsi-* prefix. - This file contains ONLY custom property declarations and species overrides. - Component styles belong in tsi-foundation.css or feature-specific files. - Do NOT duplicate these tokens in other stylesheets. Breakpoints (for reference -- CSS custom properties cannot be used in media queries, so these are documented here as canonical values): --tsi-bp-xs: 480px (mobile landscape) --tsi-bp-sm: 640px (small tablet) --tsi-bp-md: 768px (tablet) --tsi-bp-lg: 1024px (desktop) --tsi-bp-xl: 1280px (wide desktop) --tsi-bp-2xl: 1536px (ultra-wide) ========================================================================= */ :root { /* ------------------------------------------------------------------ 1. Core Brand Colors ---------------------------------------------------------------- */ --tsi-orange: #FF6600; --tsi-orange-bright: #FF8800; --tsi-orange-dark: #e68a00; --tsi-green: #00FF00; --tsi-green-dim: #00CC00; --tsi-green-soft: #4CAF50; --tsi-green-dark: #388E3C; --tsi-red: #f44336; --tsi-red-dark: #c62828; --tsi-blue: #2196F3; --tsi-blue-dark: #1565C0; --tsi-gold: #FFD700; --tsi-gold-dim: #c9a227; --tsi-silver: #C0C0C0; --tsi-bronze: #CD7F32; /* ------------------------------------------------------------------ 2. Dark Theme Surfaces (primary mode -- hunting at dawn/dusk) ---------------------------------------------------------------- */ --tsi-bg-deep: #050505; --tsi-bg: #0a0a0a; --tsi-bg-raised: #111111; --tsi-bg-elevated: #1a1a1a; --tsi-bg-hover: #222222; --tsi-bg-active: #2d2d2d; --tsi-bg-input: #1a1a2e; /* ------------------------------------------------------------------ 3. Text Hierarchy ---------------------------------------------------------------- */ --tsi-text: #ffffff; --tsi-text-secondary: rgba(255, 255, 255, 0.85); --tsi-text-muted: rgba(255, 255, 255, 0.6); --tsi-text-dim: rgba(255, 255, 255, 0.4); --tsi-text-disabled: rgba(255, 255, 255, 0.25); --tsi-text-inverse: #0a0a0a; /* ------------------------------------------------------------------ 4. Borders ---------------------------------------------------------------- */ --tsi-border: rgba(255, 255, 255, 0.08); --tsi-border-subtle: rgba(255, 255, 255, 0.04); --tsi-border-strong: rgba(255, 255, 255, 0.15); --tsi-border-focus: var(--tsi-orange); --tsi-border-success: var(--tsi-green-soft); --tsi-border-error: var(--tsi-red); /* ------------------------------------------------------------------ 5. Glass Morphism ---------------------------------------------------------------- */ --tsi-glass-bg: rgba(10, 10, 10, 0.85); --tsi-glass-bg-light: rgba(20, 20, 30, 0.9); --tsi-glass-border: rgba(255, 255, 255, 0.08); --tsi-glass-blur: 12px; /* ------------------------------------------------------------------ 6. Glow Effects ---------------------------------------------------------------- */ --tsi-glow-orange: 0 0 20px rgba(255, 102, 0, 0.5); --tsi-glow-green: 0 0 20px rgba(0, 255, 0, 0.4); --tsi-glow-gold: 0 0 20px rgba(255, 215, 0, 0.4); --tsi-glow-red: 0 0 20px rgba(244, 67, 54, 0.4); --tsi-glow-blue: 0 0 20px rgba(33, 150, 243, 0.4); /* ------------------------------------------------------------------ 7. Shadows ---------------------------------------------------------------- */ --tsi-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3); --tsi-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.3); --tsi-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4); --tsi-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5); --tsi-shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.6); --tsi-shadow-glow: var(--tsi-glow-orange); --tsi-shadow-inset: inset 0 2px 4px rgba(0, 0, 0, 0.3); /* ------------------------------------------------------------------ 8. Typography ---------------------------------------------------------------- */ --tsi-font-primary: 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, Oxygen, Ubuntu, sans-serif; --tsi-font-heading: 'Arial Black', 'Impact', sans-serif; --tsi-font-display: 'Bebas Neue', 'Arial Black', sans-serif; --tsi-font-mono: 'JetBrains Mono', 'Courier New', monospace; --tsi-text-xs: 0.75rem; --tsi-text-sm: 0.875rem; --tsi-text-base: 1rem; --tsi-text-lg: 1.125rem; --tsi-text-xl: 1.25rem; --tsi-text-2xl: 1.5rem; --tsi-text-3xl: 1.875rem; --tsi-text-4xl: 2.25rem; --tsi-text-5xl: 3rem; --tsi-leading-tight: 1.25; --tsi-leading-normal: 1.6; --tsi-leading-relaxed: 1.75; --tsi-weight-normal: 400; --tsi-weight-medium: 500; --tsi-weight-semibold: 600; --tsi-weight-bold: 700; --tsi-weight-black: 900; /* ------------------------------------------------------------------ 9. Spacing Scale (4px grid) ---------------------------------------------------------------- */ --tsi-space-0: 0; --tsi-space-1: 4px; --tsi-space-2: 8px; --tsi-space-3: 12px; --tsi-space-4: 16px; --tsi-space-5: 20px; --tsi-space-6: 24px; --tsi-space-8: 32px; --tsi-space-10: 40px; --tsi-space-12: 48px; --tsi-space-16: 64px; --tsi-space-20: 80px; --tsi-space-24: 96px; /* ------------------------------------------------------------------ 10. Border Radius ---------------------------------------------------------------- */ --tsi-radius-none: 0; --tsi-radius-sm: 4px; --tsi-radius-md: 8px; --tsi-radius-lg: 12px; --tsi-radius-xl: 16px; --tsi-radius-2xl: 24px; --tsi-radius-full: 9999px; --tsi-radius-round: 50%; /* ------------------------------------------------------------------ 11. Transitions & Motion ---------------------------------------------------------------- */ --tsi-ease: cubic-bezier(0.4, 0, 0.2, 1); --tsi-ease-in: cubic-bezier(0.4, 0, 1, 1); --tsi-ease-out: cubic-bezier(0, 0, 0.2, 1); --tsi-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --tsi-duration-instant: 75ms; --tsi-duration-fast: 150ms; --tsi-duration-normal: 300ms; --tsi-duration-slow: 500ms; --tsi-duration-slower: 700ms; --tsi-transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1); --tsi-transition-normal: 300ms cubic-bezier(0.4, 0, 0.2, 1); --tsi-transition-slow: 500ms cubic-bezier(0.4, 0, 0.2, 1); /* ------------------------------------------------------------------ 12. Z-Index Layers ---------------------------------------------------------------- */ --tsi-z-base: 1; --tsi-z-dropdown: 100; --tsi-z-sticky: 200; --tsi-z-overlay: 500; --tsi-z-modal: 1000; --tsi-z-popover: 1500; --tsi-z-toast: 2000; --tsi-z-max: 9999; /* ------------------------------------------------------------------ 13. Status Colors ---------------------------------------------------------------- */ --tsi-status-success: #4CAF50; --tsi-status-warning: #FF9800; --tsi-status-error: #f44336; --tsi-status-info: #2196F3; --tsi-status-pending: #FFC107; --tsi-status-active: #00E676; --tsi-status-inactive: #757575; /* ------------------------------------------------------------------ 14. Conservation Partner Colors ---------------------------------------------------------------- */ --tsi-partner-nwtf: #c45c26; --tsi-partner-rmef: #1a472a; --tsi-partner-du: #005030; --tsi-partner-delta: #1a365d; --tsi-partner-wtu: #3d2b1f; --tsi-partner-pf: #4a2511; } /* ====================================================================== Species Theme Overrides Apply via data-species attribute on or : Then reference --tsi-species-* in component styles. ==================================================================== */ [data-species="duck"] { --tsi-species-primary: #FF6600; --tsi-species-secondary: #00FF00; --tsi-species-accent: #FF0000; --tsi-species-emoji: '\1F986'; /* duck */ --tsi-species-gradient: linear-gradient(135deg, #000 0%, #FF6600 50%, #FF0000 100%); } [data-species="elk"] { --tsi-species-primary: #8B4513; --tsi-species-secondary: #D2691E; --tsi-species-accent: #FFD700; --tsi-species-emoji: '\1F98C'; /* deer */ --tsi-species-gradient: linear-gradient(135deg, #1a0a00 0%, #8B4513 50%, #D2691E 100%); } [data-species="turkey"] { --tsi-species-primary: #c45c26; --tsi-species-secondary: #2d1810; --tsi-species-accent: #ffc107; --tsi-species-emoji: '\1F983'; /* turkey */ --tsi-species-gradient: linear-gradient(135deg, #1a0800 0%, #c45c26 50%, #2d1810 100%); } [data-species="goose"] { --tsi-species-primary: #4a6741; --tsi-species-secondary: #8fbc8f; --tsi-species-accent: #daa520; --tsi-species-emoji: '\1FABF'; /* goose */ --tsi-species-gradient: linear-gradient(135deg, #0a1a0a 0%, #4a6741 50%, #8fbc8f 100%); } [data-species="deer"] { --tsi-species-primary: #8B6914; --tsi-species-secondary: #556B2F; --tsi-species-accent: #D2B48C; --tsi-species-emoji: '\1F98C'; /* deer */ --tsi-species-gradient: linear-gradient(135deg, #0a0800 0%, #8B6914 50%, #556B2F 100%); } [data-species="songbird"] { --tsi-species-primary: #FF69B4; --tsi-species-secondary: #87CEEB; --tsi-species-accent: #FFD700; --tsi-species-emoji: '\1F426'; /* bird */ --tsi-species-gradient: linear-gradient(135deg, #1a0020 0%, #FF69B4 50%, #87CEEB 100%); }