/*
 * Ecosystem Brand Colors
 * Shared color tokens for all domain apps
 * Usage: Link this file in your app's HTML or import in your CSS
 */

:root {
  /* Primary - Mindtastic Yellow (flagship brand color) */
  --color-primary: #fad709;
  --color-primary-dark: #c9ab00;
  --color-primary-light: #fff176;

  /* Neutrals - Clean professional palette */
  --color-bg: #ffffff;
  --color-bg-alt: #f8f9fa;
  --color-bg-dark: #1a1a1a;
  --color-text: #1a1a1a;
  --color-text-light: #ffffff;
  --color-text-muted: #6c757d;
  --color-border: #dee2e6;
  --color-border-light: #e9ecef;

  /* Domain-specific accent colors */
  --color-mindtastic: #fad709;      /* Yellow - AI Training */
  --color-t1k: #2563eb;             /* Blue - Framework/Strategy */
  --color-tomasandre: #1e293b;      /* Dark slate - Personal brand */
  --color-dolutions: #ef7825;       /* Orange - Do + Solutions */
  --color-malsattning: #8b5cf6;     /* Purple - Goal tracking */

  /* Semantic colors */
  --color-success: #10b981;
  --color-warning: #f59e0b;
  --color-error: #ef4444;
  --color-info: #3b82f6;

  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);

  /* Border radius */
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 1rem;
  --radius-full: 9999px;

  /* Spacing scale */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #0f172a;
    --color-bg-alt: #1e293b;
    --color-text: #f1f5f9;
    --color-text-muted: #94a3b8;
    --color-border: #334155;
    --color-border-light: #475569;
  }
}

/* Domain-specific theme classes */
.theme-mindtastic {
  --color-accent: var(--color-mindtastic);
}

.theme-t1k {
  --color-accent: var(--color-t1k);
}

.theme-tomasandre {
  --color-accent: var(--color-tomasandre);
}

.theme-dolutions {
  --color-accent: var(--color-dolutions);
}

.theme-malsattning {
  --color-accent: var(--color-malsattning);
}