@import url('https://fonts.googleapis.com/css2?family=Sora:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600;700;800&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

/* ==========================================================================
   Singularity Farmer — Canonical Brand Tokens & Dual-Theme Color System
   Single Source of Truth for all 7 Sovereign HTML pages.
   ========================================================================== */

:root {
  /* Brand Core Palette */
  --sf-field-green: #16603e;
  --sf-field-green-light: #228b59;
  --sf-carbon: #0b1014;
  --sf-carbon-surface: #121920;
  --sf-carbon-card: #18222c;
  --sf-harvest-gold: #dcb152;
  --sf-harvest-gold-light: #f0ce7a;
  --sf-evergreen: #0f432b;
  --sf-grain: #f3e3ba;
  --sf-canvas: #f6f3ea;
  --sf-canvas-surface: #ede8db;
  --sf-canvas-card: #ffffff;
  --sf-white: #ffffff;

  /* Typography */
  --sf-font: 'Sora', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --sf-font-mono: 'JetBrains Mono', 'Fira Code', ui-monospace, SFMono-Regular, monospace;
  --font-main: var(--sf-font);
  --font-display: 'Sora', sans-serif;
  --font-mono: var(--sf-font-mono);

  /* Border Radii */
  --sf-radius-sm: 8px;
  --sf-radius-md: 14px;
  --sf-radius-lg: 24px;
  --sf-radius-xl: 32px;
  --sf-radius-full: 9999px;
  --radius-sm: var(--sf-radius-sm);
  --radius-md: var(--sf-radius-md);
  --radius-lg: var(--sf-radius-lg);
  --radius-full: var(--sf-radius-full);

  /* Transitions & Mobile Touch */
  --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-smooth: 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  --touch-target-min: 44px;

  /* Dark Theme Tokens (Default) */
  --bg-primary: #0B1014;
  --bg-page: #0B1014;
  --bg-dark: #0B1014;
  --bg: #0B1014;
  --bg-surface: #121920;
  --bg-card: #18222C;
  --bg-card-hover: #202D3A;
  --bg-panel: rgba(11, 16, 20, 0.96);
  --bg-glass: rgba(18, 25, 32, 0.85);
  --bg-glass-card: rgba(24, 34, 44, 0.75);
  --card-bg: rgba(18, 25, 32, 0.94);
  --card-inner: rgba(26, 36, 46, 0.85);

  --border-subtle: rgba(255, 255, 255, 0.08);
  --border-card: rgba(255, 255, 255, 0.12);
  --border-color: rgba(255, 255, 255, 0.08);
  --border: rgba(255, 255, 255, 0.12);
  --border-accent: rgba(22, 96, 62, 0.5);
  --border-gold: rgba(220, 177, 82, 0.35);

  --text-main: #FFFFFF;
  --text-heading: #FFFFFF;
  --text: #F6F3EA;
  --text-secondary: #94A3B8;
  --text-muted: #94A3B8;
  --text-dim: #64748B;
  --text-inverse: #0B1014;

  --accent-green: #16603E;
  --accent-green-glow: rgba(22, 96, 62, 0.4);
  --accent-green-bright: #228B59;
  --accent-emerald: #16603E;
  --emerald: #10B981;
  --emerald-dark: #16603E;
  --emerald-dim: rgba(16, 185, 129, 0.16);

  --accent-gold: #DCB152;
  --accent-gold-glow: rgba(220, 177, 82, 0.3);
  --accent-gold-light: #F0CE7A;
  --accent-amber: #DCB152;
  --gold: #DCB152;
  --gold-dim: rgba(220, 177, 82, 0.18);

  --accent-sky: #38BDF8;
  --accent-blue: #38BDF8;
  --accent-cyan: #228B59;
  --blue: #38BDF8;
  --blue-glow: rgba(56, 189, 248, 0.25);
  --accent-rose: #EF4444;
  --danger: #EF4444;
  --purple: #8B5CF6;

  /* Legacy & Page-Specific Aliases */
  --card: var(--bg-card);
  --card-border: var(--border-card);
  --card-color: var(--bg-card);
  --bg-surface-elevated: #16202A;
  --font-sora: var(--sf-font);
  --emerald-500: var(--accent-green);
  --emerald-400: var(--accent-green-bright);
  --emerald-glow: var(--accent-green-glow);
  --emerald-bright: var(--accent-green-bright);
  --gold-500: var(--accent-gold);
  --gold-400: var(--accent-gold-light);
  --gold-glow: var(--accent-gold-glow);
  --bg-carbon: var(--sf-carbon);
  --field-green: var(--sf-field-green);
  --harvest-gold: var(--sf-harvest-gold);

  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.65);
  --shadow-glow: 0 0 24px rgba(22, 96, 62, 0.3);
  --shadow-emerald: 0 8px 32px rgba(22, 96, 62, 0.35);
  --shadow-gold: 0 8px 32px rgba(220, 177, 82, 0.25);
}

/* Explicit Dark Mode */
[data-theme="dark"] {
  --bg-primary: #0B1014;
  --bg-page: #0B1014;
  --bg-dark: #0B1014;
  --bg: #0B1014;
  --bg-surface: #121920;
  --bg-card: #18222C;
  --bg-card-hover: #202D3A;
  --bg-panel: rgba(11, 16, 20, 0.96);
  --bg-glass: rgba(18, 25, 32, 0.85);
  --bg-glass-card: rgba(24, 34, 44, 0.75);
  --card-bg: rgba(18, 25, 32, 0.94);
  --card-inner: rgba(26, 36, 46, 0.85);

  --border-subtle: rgba(255, 255, 255, 0.08);
  --border-card: rgba(255, 255, 255, 0.12);
  --border-color: rgba(255, 255, 255, 0.08);
  --border: rgba(255, 255, 255, 0.12);
  --border-accent: rgba(22, 96, 62, 0.5);
  --border-gold: rgba(220, 177, 82, 0.35);

  --text-main: #FFFFFF;
  --text-heading: #FFFFFF;
  --text: #F6F3EA;
  --text-secondary: #94A3B8;
  --text-muted: #94A3B8;
  --text-dim: #64748B;
  --text-inverse: #0B1014;

  --accent-green: #16603E;
  --accent-green-glow: rgba(22, 96, 62, 0.4);
  --accent-green-bright: #228B59;
  --accent-emerald: #16603E;
  --emerald: #10B981;
  --emerald-dark: #16603E;
  --emerald-dim: rgba(16, 185, 129, 0.16);

  --accent-gold: #DCB152;
  --accent-gold-glow: rgba(220, 177, 82, 0.3);
  --accent-gold-light: #F0CE7A;
  --accent-amber: #DCB152;
  --gold: #DCB152;
  --gold-dim: rgba(220, 177, 82, 0.18);

  --accent-sky: #38BDF8;
  --accent-blue: #38BDF8;
  --accent-cyan: #228B59;
  --blue: #38BDF8;
  --accent-rose: #EF4444;

  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.65);
  --shadow-glow: 0 0 24px rgba(22, 96, 62, 0.3);
}

/* Explicit Light Mode (Warm Canvas & Field Green) */
[data-theme="light"] {
  --bg-primary: #F6F3EA;
  --bg-page: #F6F3EA;
  --bg-dark: #EDE8DB;
  --bg: #F4F1E6;
  --bg-surface: #EFECE0;
  --bg-card: #FFFFFF;
  --bg-card-hover: #F9F7F1;
  --bg-panel: rgba(246, 243, 234, 0.96);
  --bg-glass: rgba(255, 255, 255, 0.88);
  --bg-glass-card: rgba(255, 255, 255, 0.92);
  --card-bg: #FFFFFF;
  --card-inner: #F8FAFC;

  --border-subtle: rgba(11, 16, 20, 0.09);
  --border-card: rgba(11, 16, 20, 0.12);
  --border-color: rgba(11, 16, 20, 0.1);
  --border: #D1D5DB;
  --border-accent: rgba(22, 96, 62, 0.35);
  --border-gold: rgba(184, 142, 50, 0.4);

  --text-main: #0B1014;
  --text-heading: #0B1014;
  --text: #0B1014;
  --text-secondary: #4A5550;
  --text-muted: #64748B;
  --text-dim: #94A3B8;
  --text-inverse: #FFFFFF;

  --accent-green: #16603E;
  --accent-green-glow: rgba(22, 96, 62, 0.2);
  --accent-green-bright: #124C31;
  --accent-emerald: #16603E;
  --emerald: #059669;
  --emerald-dark: #16603E;
  --emerald-dim: rgba(5, 150, 105, 0.14);

  --accent-gold: #B88E32;
  --accent-gold-glow: rgba(184, 142, 50, 0.2);
  --accent-gold-light: #8E6B20;
  --accent-amber: #B88E32;
  --gold: #B48418;
  --gold-dim: rgba(180, 132, 24, 0.15);

  --accent-sky: #0284C7;
  --accent-blue: #0284C7;
  --accent-cyan: #124C31;
  --blue: #0284C7;
  --blue-glow: rgba(2, 132, 199, 0.2);
  --accent-rose: #DC2626;
  --danger: #DC2626;
  --purple: #7C3AED;

  /* Legacy & Page-Specific Aliases (Light Mode) */
  --card: var(--bg-card);
  --card-border: var(--border-card);
  --card-color: var(--bg-card);
  --bg-surface-elevated: #F4F1E6;
  --font-sora: var(--sf-font);
  --emerald-500: var(--accent-green);
  --emerald-400: var(--accent-green-bright);
  --emerald-glow: var(--accent-green-glow);
  --emerald-bright: var(--accent-green-bright);
  --gold-500: var(--accent-gold);
  --gold-400: var(--accent-gold-light);
  --gold-glow: var(--accent-gold-glow);
  --bg-carbon: var(--sf-canvas);
  --field-green: var(--sf-field-green);
  --harvest-gold: var(--accent-gold);

  --shadow-sm: 0 2px 6px rgba(11, 16, 20, 0.05);
  --shadow-md: 0 8px 20px rgba(11, 16, 20, 0.08);
  --shadow-lg: 0 16px 36px rgba(11, 16, 20, 0.12);
  --shadow-glow: 0 0 20px rgba(22, 96, 62, 0.15);
}

/* Typography Utility Classes */
.sf-heading {
  font-family: var(--sf-font);
  font-weight: 700;
  letter-spacing: -0.03em;
}

.sf-label {
  font-family: var(--sf-font);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.sf-mono {
  font-family: var(--sf-font-mono);
}

/* Mobile Usability Enforcements */
@media (max-width: 900px) {
  button, 
  .hud-btn, 
  .mobile-floating-btn, 
  .filter-pill, 
  .drawer-tab, 
  .map-btn {
    min-height: 38px;
    touch-action: manipulation;
  }
}