/* Base theme — neutral defaults for unthemed creators.
   Each site's theme file overrides the custom properties below.
   Loading order: styles.css → base-theme.css → themes/{site}.css */

:root {
  --color-accent: #3b82f6;
  --color-accent-rgb: 59 130 246;
  --color-accent-hover: #60a5fa;
  --color-accent-hover-rgb: 96 165 250;

  --color-bg: #0f0f0f;
  --color-bg-rgb: 15 15 15;
  --color-surface: #1a1a1a;
  --color-surface-rgb: 26 26 26;
  --color-text: #ffffff;
  --color-text-muted: #9ca3af;
  --color-border: rgba(255, 255, 255, 0.1);
  --font-display: system-ui, -apple-system, sans-serif;
  --font-body: system-ui, -apple-system, sans-serif;

  --border-radius: 0.5rem; /* matches Tailwind rounded-lg */
}

/* --- Override Tailwind background classes to use custom properties --- */

.bg-\[\#0f0f0f\] { background-color: var(--color-bg) !important; }
.bg-\[\#1a1a1a\] { background-color: var(--color-surface) !important; }

/* --- Override Tailwind accent-colour classes to use custom properties --- */

/* Background */
.bg-\[\#ff6b1a\] { background-color: var(--color-accent) !important; }
.bg-\[\#ff6b1a\]\/20 { background-color: rgb(var(--color-accent-rgb) / 0.2) !important; }
.bg-\[\#ff6b1a\]\/10 { background-color: rgb(var(--color-accent-rgb) / 0.1) !important; }

/* Text */
.text-\[\#ff6b1a\] { color: var(--color-accent) !important; }

/* Border */
.border-\[\#ff6b1a\] { border-color: var(--color-accent) !important; }

/* Gradient */
.from-\[\#ff6b1a\] { --tw-gradient-from: var(--color-accent) !important; }
.to-\[\#ff8542\] { --tw-gradient-to: var(--color-accent-hover) !important; }

/* Focus */
.focus\:ring-\[\#ff6b1a\]:focus { --tw-ring-color: var(--color-accent) !important; }
.focus\:border-\[\#ff6b1a\]:focus { border-color: var(--color-accent) !important; }

/* Shadow */
.shadow-\[\#ff6b1a\]\/20 { --tw-shadow-color: rgb(var(--color-accent-rgb) / 0.2) !important; }
.shadow-\[\#ff6b1a\]\/30 { --tw-shadow-color: rgb(var(--color-accent-rgb) / 0.3) !important; }

/* Hover: background */
.hover\:bg-\[\#ff8542\]:hover { background-color: var(--color-accent-hover) !important; }
.hover\:bg-\[\#ff6b1a\]\/10:hover { background-color: rgb(var(--color-accent-rgb) / 0.1) !important; }

/* Hover: text */
.hover\:text-\[\#ff6b1a\]:hover { color: var(--color-accent) !important; }
.hover\:text-\[\#ff8542\]:hover { color: var(--color-accent-hover) !important; }

/* Hover: border */
.hover\:border-\[\#ff6b1a\]:hover { border-color: var(--color-accent) !important; }
.hover\:border-\[\#ff6b1a\]\/50:hover { border-color: rgb(var(--color-accent-rgb) / 0.5) !important; }

/* Hover: shadow */
.hover\:shadow-\[\#ff6b1a\]\/30:hover { --tw-shadow-color: rgb(var(--color-accent-rgb) / 0.3) !important; }
.hover\:shadow-\[\#ff6b1a\]\/50:hover { --tw-shadow-color: rgb(var(--color-accent-rgb) / 0.5) !important; }

/* --- Override Tailwind border-radius to use custom property --- */

.rounded-lg, .sm\:rounded-lg,
.rounded-xl, .rounded-2xl,
.rounded-full { border-radius: var(--border-radius) !important; }