/* ============================================================
   DoAide Brand System v1.0
   Import this file in any DoAide product for shared branding.
   https://doaide.com/brand/doaide-brand.css
   ============================================================ */

/* --- Brand Tokens --- */
:root {
  /* Primary palette */
  --doaide-primary: #6366f1;
  --doaide-primary-light: #818cf8;
  --doaide-primary-dark: #4f46e5;
  --doaide-accent: #8b5cf6;

  /* Neutrals */
  --doaide-bg-dark: #06070a;
  --doaide-bg-card: #0d0f14;
  --doaide-bg-card-hover: #141720;
  --doaide-border: rgba(255, 255, 255, 0.06);
  --doaide-border-hover: rgba(99, 102, 241, 0.3);
  --doaide-text: #e2e8f0;
  --doaide-text-muted: #94a3b8;
  --doaide-text-dim: #64748b;

  /* Typography */
  --doaide-font: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --doaide-font-mono: 'SF Mono', 'Fira Code', 'JetBrains Mono', monospace;

  /* Spacing */
  --doaide-radius: 12px;
  --doaide-radius-sm: 8px;
  --doaide-radius-lg: 16px;

  /* Shadows */
  --doaide-shadow: 0 1px 3px rgba(0,0,0,0.3), 0 1px 2px rgba(0,0,0,0.2);
  --doaide-shadow-lg: 0 10px 25px rgba(0,0,0,0.4);
  --doaide-glow: 0 0 20px rgba(99, 102, 241, 0.15);
}

/* --- DoAide Footer Badge ---
   Usage: <div class="doaide-badge"><a href="https://doaide.com">A DoAide Product</a></div>
*/
.doaide-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 0;
  font-family: var(--doaide-font);
  font-size: 12px;
  color: var(--doaide-text-dim);
  letter-spacing: 0.02em;
}

.doaide-badge a {
  color: var(--doaide-text-muted);
  text-decoration: none;
  transition: color 0.2s;
}

.doaide-badge a:hover {
  color: var(--doaide-primary-light);
}

/* --- DoAide Footer Component ---
   Usage: <footer class="doaide-footer">...</footer>
*/
.doaide-footer {
  border-top: 1px solid var(--doaide-border);
  padding: 24px 0;
  text-align: center;
  font-family: var(--doaide-font);
  font-size: 13px;
  color: var(--doaide-text-dim);
}

.doaide-footer a {
  color: var(--doaide-text-muted);
  text-decoration: none;
  transition: color 0.2s;
}

.doaide-footer a:hover {
  color: var(--doaide-primary-light);
}

/* --- Product Card (for landing page and cross-links) --- */
.doaide-product-card {
  background: var(--doaide-bg-card);
  border: 1px solid var(--doaide-border);
  border-radius: var(--doaide-radius);
  padding: 24px;
  transition: border-color 0.25s, box-shadow 0.25s, transform 0.25s;
  text-decoration: none;
  color: var(--doaide-text);
  display: block;
}

.doaide-product-card:hover {
  border-color: var(--doaide-border-hover);
  box-shadow: var(--doaide-glow);
  transform: translateY(-2px);
}

/* --- Utility: Gradient text --- */
.doaide-gradient-text {
  background: linear-gradient(135deg, var(--doaide-primary), var(--doaide-accent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* --- Light theme overrides (for products with white backgrounds) --- */
@media (prefers-color-scheme: light) {
  :root {
    --doaide-bg-dark: #ffffff;
    --doaide-bg-card: #f8fafc;
    --doaide-bg-card-hover: #f1f5f9;
    --doaide-border: rgba(0, 0, 0, 0.08);
    --doaide-border-hover: rgba(99, 102, 241, 0.3);
    --doaide-text: #1e293b;
    --doaide-text-muted: #475569;
    --doaide-text-dim: #94a3b8;
    --doaide-shadow: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
    --doaide-shadow-lg: 0 10px 25px rgba(0,0,0,0.1);
    --doaide-glow: 0 0 20px rgba(99, 102, 241, 0.1);
  }
}

/* Light theme explicit class (for products that don't use prefers-color-scheme) */
.doaide-light {
  --doaide-bg-dark: #ffffff;
  --doaide-bg-card: #f8fafc;
  --doaide-bg-card-hover: #f1f5f9;
  --doaide-border: rgba(0, 0, 0, 0.08);
  --doaide-border-hover: rgba(99, 102, 241, 0.3);
  --doaide-text: #1e293b;
  --doaide-text-muted: #475569;
  --doaide-text-dim: #94a3b8;
}