/*
 * tribeTools Theme Tokens
 * These CSS variables define the visual language for each tribe.
 * Components should ONLY use these tokens, never raw colors.
 *
 * THEMING: Each tribe shell defines only --tribe-color-base.
 * The full color family is auto-generated using CSS relative color syntax.
 */

/* ============================================
   DEFAULT THEME: tribeCast (Orange/Amber)
   ============================================ */
/* DIAGNOSTIC TEST: If you see a magenta border, this file is loading. */
body {
  border: 5px solid magenta !important;
}

:root {
  /* === TRIBE BASE COLOR (override this per tribe) === */
  /* --tribe-color-base: #f97316; */          /* Default: tribeCast orange (DISABLED) */

  /* === AUTO-GENERATED COLOR FAMILY === */
  /* Primary accent = base color as-is */
  --color-accent-primary: var(--tribe-color-base);

  /* Secondary = slightly lighter, less saturated */
  --color-accent-secondary: color-mix(in oklch, var(--tribe-color-base) 80%, white);

  /* Tertiary = much lighter, for subtle backgrounds */
  --color-accent-tertiary: color-mix(in oklch, var(--tribe-color-base) 60%, white);

  /* Muted = base at 20% opacity (for fills, heatmap cells) */
  --color-accent-muted: color-mix(in srgb, var(--tribe-color-base) 20%, transparent);

  /* Glow = lighter version at 50% opacity (for glows, focus rings) */
  --color-accent-glow: color-mix(in srgb, color-mix(in oklch, var(--tribe-color-base) 70%, white) 50%, transparent);

  /* Icon Hue Filter (default: no rotation for orange) */
  --icon-hue-rotation: 0deg;
  --icon-saturation: 1;
  --icon-brightness: 1;

  /* Semantic Colors */
  --color-success: #22c55e;             /* green-500 */
  --color-warning: #eab308;             /* yellow-500 */
  --color-error: #ef4444;               /* red-500 */
  --color-info: #06b6d4;                /* cyan-500 */

  /* Surfaces */
  --color-surface-base: rgba(255, 255, 255, 0.03);
  --color-surface-raised: rgba(255, 255, 255, 0.05);
  --color-surface-overlay: rgba(0, 0, 0, 0.8);
  --color-surface-hover: rgba(255, 255, 255, 0.06);
  --color-surface-active: color-mix(in srgb, var(--tribe-color-base) 10%, transparent);

  /* Borders */
  --color-border-subtle: rgba(255, 255, 255, 0.06);
  --color-border-default: rgba(255, 255, 255, 0.1);
  --color-border-strong: rgba(255, 255, 255, 0.2);
  --color-border-accent: color-mix(in srgb, var(--tribe-color-base) 30%, transparent);

  /* Text */
  --color-text-primary: #ffffff;
  --color-text-secondary: #a1a1aa;      /* zinc-400 */
  --color-text-muted: #71717a;          /* zinc-500 */
  --color-text-accent: var(--tribe-color-base);

  /* Backgrounds */
  --color-bg-primary: #09090b;          /* zinc-950 */
  --color-bg-secondary: #18181b;        /* zinc-900 */

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.5);
  --shadow-glow: 0 0 20px color-mix(in srgb, var(--tribe-color-base) 15%, transparent);

  /* Radii */
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-full: 9999px;

  /* Spacing (reference) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;

  /* Typography */
  --font-sans: ui-sans-serif, system-ui, sans-serif;
  --font-mono: ui-monospace, monospace;

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-normal: 200ms ease;
  --transition-slow: 300ms ease;

  /* Z-Index Scale */
  --z-dropdown: 50;
  --z-sticky: 100;
  --z-overlay: 200;
  --z-modal: 300;
  --z-popover: 400;
  --z-tooltip: 500;
}

/* ============================================
   THEME: DisclosureToday (Blue)
   Only override --tribe-color-base and icon filters.
   Color family is auto-generated from base.
   ============================================ */
[data-theme="disclosure"] {
  --tribe-color-base: #3b82f6;          /* blue-500 */

  /* Icon Hue Filter: Orange → Blue (200° rotation) */
  --icon-hue-rotation: 200deg;
  --icon-saturation: 1.2;
  --icon-brightness: 1;
}

/* ============================================
   THEME: WorldGame (Cyan on Black)
   ============================================ */
[data-theme="worldgame"] {
  --tribe-color-base: #06b6d4;          /* cyan-500 */

  /* Icon Hue Filter: Orange → Cyan (170° rotation) */
  --icon-hue-rotation: 170deg;
  --icon-saturation: 1.2;
  --icon-brightness: 1;
}

/* ============================================
   THEME: AppleToday (Silver/Gray)
   ============================================ */
[data-theme="apple"] {
  --tribe-color-base: #a1a1aa;          /* zinc-400 / silver */

  /* Override surfaces for silver theme */
  --color-surface-base: rgba(255, 255, 255, 0.05);
  --color-surface-raised: rgba(255, 255, 255, 0.08);
  --color-border-subtle: rgba(255, 255, 255, 0.08);

  /* Icon Hue Filter: Orange → Gray (desaturate) */
  --icon-hue-rotation: 0deg;
  --icon-saturation: 0.3;
  --icon-brightness: 1.3;
}

/* ============================================
   THEME: TeslaToday (Tesla Red)
   ============================================ */
[data-theme="tesla"] {
  --tribe-color-base: #e82127;          /* Tesla Red */

  /* Icon Hue Filter: Orange → Red (340° rotation) */
  --icon-hue-rotation: 340deg;
  --icon-saturation: 1.2;
  --icon-brightness: 1;
}

/* ============================================
   THEME: AxisVR (Gold/Black)
   ============================================ */
[data-theme="axisvr"] {
  --tribe-color-base: #FFD700;          /* Gold */

  /* Override surfaces for pure black background */
  --color-bg-primary: #000000;          /* Pure black */
  --color-bg-secondary: #0a0a0a;        /* Near black */
  --color-surface-base: rgba(255, 215, 0, 0.03);
  --color-surface-raised: rgba(255, 215, 0, 0.05);
  --color-surface-active: rgba(255, 215, 0, 0.10);
  --color-border-subtle: rgba(255, 215, 0, 0.08);
  --color-border-accent: rgba(255, 215, 0, 0.30);

  /* Icon Hue Filter: Orange → Gold (-15° toward yellow, boost saturation) */
  --icon-hue-rotation: -15deg;
  --icon-saturation: 1.4;
  --icon-brightness: 1.15;
}