/**
 * theme.css — Design tokens and base element styles.
 *
 * Owns: CSS custom properties (colours, spacing, shadows) for light and dark
 *       themes, font import, top/tab/nav bar backgrounds, theme toggle button,
 *       and base .btn / .btn-primary / .btn-ghost rules used by index.html.
 *
 * Load order: theme.css → layout.css → tendera-ui.css → typography.css
 *
 * NOTE: .btn-primary and .btn-ghost are also extended in tendera-ui.css with
 *       full-width block variants for the app pages. The rules here handle the
 *       inline/flex variant used on the landing page.
 */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
  /* Cosmic Electric - dark theme */
  --bg: #0a0a0a;
  --bg-raised: rgba(0, 0, 0, 0.75);
  --bg-card: rgba(0, 0, 0, 0.75);
  --bg-card-hover: #0a0a0a;
  --bg-primary: #0a0a0a;
  --bg-elevated: rgba(0, 0, 0, 0.75);
  --bg-input: rgba(0, 0, 0, 0.75);

  --border: rgba(255, 255, 255, 0.15);
  --border-hover: rgba(255, 255, 255, 0.35);
  --border-focus: rgba(255, 255, 255, 0.5);

  --text: #ffffff;
  --text-primary: #ffffff;
  --text-secondary: #a1a1aa;
  --text-dim: #71717a;
  --text-tertiary: #71717a;
  --text-disabled: #4a4a5a;

  --primary: #00e5ff;
  --secondary: #7c3aed;
  --accent: #fbbf24;
  --btn-primary-bg: #00e5ff;
  --btn-primary-text: #0a0a0a;
  --btn-ghost-border: rgba(255, 255, 255, 0.4);
  --btn-border: 1px solid #000;
  --btn-hover-bg: #ffffff;
  --btn-hover-text: #000000;

  --success: #10b981;
  --warning: #fbbf24;
  --error: #ef4444;

  --gradient-hero: linear-gradient(135deg, #7c3aed 0%, #00e5ff 100%);
  --gradient-surface: linear-gradient(180deg, rgba(0, 0, 0, 0.75) 0%, #0a0a0a 100%);
  --font: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --shadow: 0 4px 16px rgba(0, 229, 255, 0.1);
  --shadow-card: 0 8px 32px rgba(0, 0, 0, 0.6);
  --bg-bar: rgba(10, 10, 10, 0.96);
  --bg-bar-scrolled: rgba(10, 10, 10, 0.98);
  --tab-item-hover: rgba(0, 43, 54, 0.06);
}

/* Light theme — pearl #F5F5F5 for background, menus, banners, scrolled nav */
[data-theme="light"] {
  --bg: #F5F5F5;
  --bg-raised: #ffffff;
  --bg-card: #F5F5F5;
  --bg-card-hover: #eeeeee;
  --bg-primary: #F5F5F5;
  --bg-elevated: #ffffff;
  --bg-input: #ffffff;

  --border: rgba(0, 0, 0, 0.2);
  --border-hover: rgba(0, 0, 0, 0.35);
  --border-focus: rgba(0, 0, 0, 0.5);

  --text: #18181b;
  --text-primary: #18181b;
  --text-secondary: #52525b;
  --text-dim: #71717a;
  --text-tertiary: #71717a;
  --text-disabled: #a1a1aa;

  --btn-primary-text: #18181b;
  --btn-border: 1px solid #000;
  --btn-hover-bg: #ffffff;
  --btn-hover-text: #000000;

  --gradient-surface: linear-gradient(180deg, #ffffff 0%, #F5F5F5 100%);
  --shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  --shadow-card: 0 8px 32px rgba(0, 0, 0, 0.12);
  --bg-bar: #F5F5F5;
  --bg-bar-scrolled: #F5F5F5;
  --tab-item-hover: rgba(0, 0, 0, 0.06);
}

/* Top bar and tab bar — use theme variable so light/dark both work */
.top-bar {
  background: var(--bg-bar);
}
.tab-bar {
  background: var(--bg-bar);
}
/* Response builder sticky header */
.header {
  background: var(--bg-bar);
}

/* Index landing: nav bar when scrolled + mobile menu overlay */
#navbar.scrolled,
nav.scrolled {
  background: var(--bg-bar-scrolled);
  border-bottom-color: var(--border);
}
.nav-links {
  background: var(--bg-bar-scrolled);
}

/* ─── Global font smoothing ──────────────────────────────────────────────── */
/* Also set in typography.css for app pages; harmless to declare in both. */
* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body {
  font-family: var(--font);
}

/* ─── Theme toggle ───────────────────────────────────────────────────────── */
/* Placeholder span is in the header HTML; js/theme-preference.js replaces it with a button. */
.theme-toggle-placeholder {
  display: inline-flex;
  align-items: center;
}

/* Theme toggle button */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition: color 0.2s, background 0.2s;
}
.theme-toggle:hover {
  color: var(--text-primary);
  background: var(--border);
}
.theme-toggle svg {
  width: 20px;
  height: 20px;
}

/* ─── Base buttons (index.html / landing page) ───────────────────────────── */
/* App pages use the block variants in tendera-ui.css which add min-height etc. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.65rem 1.4rem;
  border-radius: 6px;
  font-family: var(--font);
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  border: var(--btn-border);
  background: transparent;
  color: var(--text-primary);
}
.btn:hover {
  background: var(--btn-hover-bg);
  color: var(--btn-hover-text);
  border-color: #000;
}
.btn:active {
  opacity: 0.95;
}
.btn-primary {
  border: var(--btn-border);
  background: transparent;
  color: var(--text-primary);
}
.btn-primary:hover {
  background: var(--btn-hover-bg);
  color: var(--btn-hover-text);
  border-color: #000;
}
.btn-primary:active {
  opacity: 0.95;
}
.btn-ghost {
  border: var(--btn-border);
  background: transparent;
  color: var(--text-primary);
}
.btn-ghost:hover {
  background: var(--btn-hover-bg);
  color: var(--btn-hover-text);
  border-color: #000;
}
.btn-ghost:active {
  opacity: 0.95;
}