/**
 * Shared Theme CSS Variables (HSL-based)
 *
 * This file defines HSL-based CSS custom properties for all theme variants.
 * Variables are set by @manacore/shared-theme's createThemeStore() at runtime,
 * but this file provides sensible defaults for static rendering.
 *
 * Usage in app.css (Tailwind v4):
 * ```css
 * @import "tailwindcss";
 * @import "@manacore/shared-tailwind/themes.css";
 * ```
 *
 * Color format: HSL values without hsl() wrapper
 * Example: --color-primary: 47 95% 58%;
 * Used as: hsl(var(--color-primary))
 */

/* ===== Tailwind v4 Theme Configuration ===== */
@theme {
  /* Brand color */
  --color-mana: #4287f5;

  /* Semantic colors using CSS variables */
  --color-background: hsl(var(--color-background));
  --color-foreground: hsl(var(--color-foreground));

  --color-primary: hsl(var(--color-primary));
  --color-primary-foreground: hsl(var(--color-primary-foreground));

  --color-secondary: hsl(var(--color-secondary));
  --color-secondary-foreground: hsl(var(--color-secondary-foreground));

  --color-surface: hsl(var(--color-surface));
  --color-surface-hover: hsl(var(--color-surface-hover));
  --color-surface-elevated: hsl(var(--color-surface-elevated));

  --color-muted: hsl(var(--color-muted));
  --color-muted-foreground: hsl(var(--color-muted-foreground));

  --color-border: hsl(var(--color-border));
  --color-border-strong: hsl(var(--color-border-strong));

  --color-error: hsl(var(--color-error));
  --color-success: hsl(var(--color-success));
  --color-warning: hsl(var(--color-warning));

  --color-input: hsl(var(--color-input));
  --color-ring: hsl(var(--color-ring));

  /* Legacy aliases */
  --color-content: hsl(var(--color-surface));
  --color-content-hover: hsl(var(--color-surface-hover));
  --color-content-page: hsl(var(--color-background));
  --color-menu: hsl(var(--color-muted));
  --color-menu-hover: hsl(var(--color-surface-hover));
  --color-theme: hsl(var(--color-foreground));
  --color-theme-secondary: hsl(var(--color-muted-foreground));
  --color-primary-btn: hsl(var(--color-primary));
  --color-primary-btn-text: hsl(var(--color-primary-foreground));

  /* Border radius */
  --radius-none: 0;
  --radius-sm: 0.25rem;
  --radius-DEFAULT: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-2xl: 1.5rem;
  --radius-3xl: 2rem;
  --radius-full: 9999px;

  /* Box shadows */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-DEFAULT: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --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);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
  --shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
  --shadow-none: none;

  /* Font families */
  --font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', Menlo, Monaco, Consolas, monospace;

  /* Animations */
  --animate-spin-slow: spin 3s linear infinite;
  --animate-pulse-slow: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  --animate-bounce-slow: bounce 2s infinite;
  --animate-fade-in: fadeIn 0.2s ease-out;
  --animate-fade-out: fadeOut 0.2s ease-in;
  --animate-slide-in: slideIn 0.2s ease-out;
  --animate-slide-out: slideOut 0.2s ease-in;
}

/* ===== Keyframes ===== */
@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes fadeOut {
  0% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes slideIn {
  0% { transform: translateY(-10px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}

@keyframes slideOut {
  0% { transform: translateY(0); opacity: 1; }
  100% { transform: translateY(-10px); opacity: 0; }
}

/* ===== Default Theme (Lume Light) ===== */
:root {
  /* Primary brand color */
  --color-primary: 47 95% 58%;
  --color-primary-foreground: 0 0% 0%;

  /* Secondary accent */
  --color-secondary: 47 100% 41%;
  --color-secondary-foreground: 0 0% 0%;

  /* Page background */
  --color-background: 0 0% 87%;

  /* Main text color */
  --color-foreground: 0 0% 17%;

  /* Surfaces (cards, modals, etc.) */
  --color-surface: 0 0% 100%;
  --color-surface-hover: 0 0% 96%;
  --color-surface-elevated: 0 0% 100%;

  /* Muted/subtle elements */
  --color-muted: 0 0% 90%;
  --color-muted-foreground: 0 0% 40%;

  /* Borders */
  --color-border: 0 0% 90%;
  --color-border-strong: 0 0% 80%;

  /* Semantic colors */
  --color-error: 6 78% 57%;
  --color-success: 145 63% 42%;
  --color-warning: 36 100% 50%;

  /* Form elements */
  --color-input: 0 0% 100%;
  --color-ring: 47 95% 58%;

  /* Border radius */
  --radius-sm: 0.25rem;
  --radius: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-2xl: 1.5rem;
  --radius-3xl: 2rem;

  /* ShadCN-style aliases (without color- prefix) for shared components */
  --background: var(--color-background);
  --foreground: var(--color-foreground);
  --primary: var(--color-primary);
  --primary-foreground: var(--color-primary-foreground);
  --secondary: var(--color-secondary);
  --secondary-foreground: var(--color-secondary-foreground);
  --muted: var(--color-muted);
  --muted-foreground: var(--color-muted-foreground);
  --border: var(--color-border);
  --input: var(--color-input);
  --ring: var(--color-ring);
  --card: var(--color-surface);
  --card-foreground: var(--color-foreground);
  --accent: var(--color-surface-hover);
  --accent-foreground: var(--color-foreground);
}

/* ===== Dark Mode ===== */
.dark,
:root.dark {
  --color-primary: 47 95% 58%;
  --color-primary-foreground: 0 0% 0%;

  --color-secondary: 47 70% 29%;
  --color-secondary-foreground: 0 0% 100%;

  --color-background: 0 0% 6%;
  --color-foreground: 0 0% 100%;

  --color-surface: 0 0% 12%;
  --color-surface-hover: 0 0% 16%;
  --color-surface-elevated: 0 0% 14%;

  --color-muted: 0 0% 20%;
  --color-muted-foreground: 0 0% 60%;

  --color-border: 0 0% 26%;
  --color-border-strong: 0 0% 35%;

  --color-error: 6 78% 57%;
  --color-success: 145 63% 49%;
  --color-warning: 48 100% 50%;

  --color-input: 0 0% 14%;
  --color-ring: 47 95% 58%;
}

/* ===== Lume Theme (Gold) ===== */
[data-theme="lume"] {
  --color-primary: 47 95% 58%;
  --color-primary-foreground: 0 0% 0%;
  --color-secondary: 47 100% 41%;
  --color-secondary-foreground: 0 0% 0%;
  --color-background: 0 0% 87%;
  --color-foreground: 0 0% 17%;
  --color-surface: 0 0% 100%;
  --color-surface-hover: 0 0% 96%;
  --color-surface-elevated: 0 0% 100%;
  --color-muted: 0 0% 90%;
  --color-muted-foreground: 0 0% 40%;
  --color-border: 0 0% 90%;
  --color-border-strong: 0 0% 80%;
  --color-error: 6 78% 57%;
  --color-success: 145 63% 42%;
  --color-warning: 36 100% 50%;
  --color-input: 0 0% 100%;
  --color-ring: 47 95% 58%;
}

[data-theme="lume"].dark,
.dark[data-theme="lume"] {
  --color-primary: 47 95% 58%;
  --color-primary-foreground: 0 0% 0%;
  --color-secondary: 47 70% 29%;
  --color-secondary-foreground: 0 0% 100%;
  --color-background: 0 0% 6%;
  --color-foreground: 0 0% 100%;
  --color-surface: 0 0% 12%;
  --color-surface-hover: 0 0% 16%;
  --color-surface-elevated: 0 0% 14%;
  --color-muted: 0 0% 20%;
  --color-muted-foreground: 0 0% 60%;
  --color-border: 0 0% 26%;
  --color-border-strong: 0 0% 35%;
  --color-error: 6 78% 57%;
  --color-success: 145 63% 49%;
  --color-warning: 48 100% 50%;
  --color-input: 0 0% 14%;
  --color-ring: 47 95% 58%;
}

/* ===== Nature Theme (Green) ===== */
[data-theme="nature"] {
  --color-primary: 122 39% 49%;
  --color-primary-foreground: 0 0% 100%;
  --color-secondary: 122 38% 63%;
  --color-secondary-foreground: 0 0% 0%;
  --color-background: 80 33% 97%;
  --color-foreground: 122 56% 24%;
  --color-surface: 0 0% 100%;
  --color-surface-hover: 120 25% 95%;
  --color-surface-elevated: 0 0% 100%;
  --color-muted: 120 25% 95%;
  --color-muted-foreground: 122 20% 40%;
  --color-border: 120 25% 91%;
  --color-border-strong: 120 26% 79%;
  --color-error: 0 65% 67%;
  --color-success: 122 39% 49%;
  --color-warning: 36 100% 50%;
  --color-input: 0 0% 100%;
  --color-ring: 122 39% 49%;
}

[data-theme="nature"].dark,
.dark[data-theme="nature"] {
  --color-primary: 122 39% 49%;
  --color-primary-foreground: 0 0% 100%;
  --color-secondary: 122 30% 35%;
  --color-secondary-foreground: 0 0% 100%;
  --color-background: 0 0% 7%;
  --color-foreground: 0 0% 100%;
  --color-surface: 120 10% 12%;
  --color-surface-hover: 120 10% 16%;
  --color-surface-elevated: 120 10% 14%;
  --color-muted: 120 10% 20%;
  --color-muted-foreground: 120 10% 60%;
  --color-border: 120 10% 25%;
  --color-border-strong: 120 10% 35%;
  --color-error: 0 65% 57%;
  --color-success: 122 50% 55%;
  --color-warning: 48 100% 50%;
  --color-input: 120 10% 14%;
  --color-ring: 122 39% 49%;
}

/* ===== Stone Theme (Blue Gray) ===== */
[data-theme="stone"] {
  --color-primary: 200 18% 46%;
  --color-primary-foreground: 0 0% 100%;
  --color-secondary: 200 15% 62%;
  --color-secondary-foreground: 0 0% 0%;
  --color-background: 210 17% 97%;
  --color-foreground: 200 19% 18%;
  --color-surface: 0 0% 100%;
  --color-surface-hover: 200 10% 94%;
  --color-surface-elevated: 0 0% 100%;
  --color-muted: 200 10% 94%;
  --color-muted-foreground: 200 10% 45%;
  --color-border: 200 10% 88%;
  --color-border-strong: 200 12% 75%;
  --color-error: 4 90% 63%;
  --color-success: 145 63% 42%;
  --color-warning: 36 100% 50%;
  --color-input: 0 0% 100%;
  --color-ring: 200 18% 46%;
}

[data-theme="stone"].dark,
.dark[data-theme="stone"] {
  --color-primary: 200 15% 52%;
  --color-primary-foreground: 0 0% 0%;
  --color-secondary: 200 12% 35%;
  --color-secondary-foreground: 0 0% 100%;
  --color-background: 0 0% 7%;
  --color-foreground: 0 0% 100%;
  --color-surface: 200 10% 12%;
  --color-surface-hover: 200 10% 16%;
  --color-surface-elevated: 200 10% 14%;
  --color-muted: 200 10% 20%;
  --color-muted-foreground: 200 10% 60%;
  --color-border: 200 10% 25%;
  --color-border-strong: 200 10% 35%;
  --color-error: 4 90% 58%;
  --color-success: 145 63% 49%;
  --color-warning: 48 100% 50%;
  --color-input: 200 10% 14%;
  --color-ring: 200 15% 52%;
}

/* ===== Ocean Theme (Blue) ===== */
[data-theme="ocean"] {
  --color-primary: 199 98% 45%;
  --color-primary-foreground: 0 0% 100%;
  --color-secondary: 199 92% 64%;
  --color-secondary-foreground: 0 0% 0%;
  --color-background: 199 100% 97%;
  --color-foreground: 199 100% 18%;
  --color-surface: 0 0% 100%;
  --color-surface-hover: 199 100% 94%;
  --color-surface-elevated: 0 0% 100%;
  --color-muted: 199 100% 94%;
  --color-muted-foreground: 199 50% 40%;
  --color-border: 199 71% 87%;
  --color-border-strong: 199 79% 76%;
  --color-error: 4 90% 63%;
  --color-success: 145 63% 42%;
  --color-warning: 36 100% 50%;
  --color-input: 0 0% 100%;
  --color-ring: 199 98% 45%;
}

[data-theme="ocean"].dark,
.dark[data-theme="ocean"] {
  --color-primary: 199 98% 48%;
  --color-primary-foreground: 0 0% 0%;
  --color-secondary: 199 60% 35%;
  --color-secondary-foreground: 0 0% 100%;
  --color-background: 0 0% 7%;
  --color-foreground: 0 0% 100%;
  --color-surface: 199 30% 12%;
  --color-surface-hover: 199 30% 16%;
  --color-surface-elevated: 199 30% 14%;
  --color-muted: 199 20% 20%;
  --color-muted-foreground: 199 20% 60%;
  --color-border: 199 20% 25%;
  --color-border-strong: 199 20% 35%;
  --color-error: 4 90% 58%;
  --color-success: 145 63% 49%;
  --color-warning: 48 100% 50%;
  --color-input: 199 30% 14%;
  --color-ring: 199 98% 48%;
}

/* ===== Dark mode via media query (fallback) ===== */
@media (prefers-color-scheme: dark) {
  :root:not(.dark):not([data-theme]) {
    --color-primary: 47 95% 58%;
    --color-primary-foreground: 0 0% 0%;
    --color-secondary: 47 70% 29%;
    --color-secondary-foreground: 0 0% 100%;
    --color-background: 0 0% 6%;
    --color-foreground: 0 0% 100%;
    --color-surface: 0 0% 12%;
    --color-surface-hover: 0 0% 16%;
    --color-surface-elevated: 0 0% 14%;
    --color-muted: 0 0% 20%;
    --color-muted-foreground: 0 0% 60%;
    --color-border: 0 0% 26%;
    --color-border-strong: 0 0% 35%;
    --color-error: 6 78% 57%;
    --color-success: 145 63% 49%;
    --color-warning: 48 100% 50%;
    --color-input: 0 0% 14%;
    --color-ring: 47 95% 58%;
  }
}

/* ===== Base Styles ===== */
@layer base {
  * {
    border-color: hsl(var(--color-border));
  }

  body {
    background-color: hsl(var(--color-background));
    color: hsl(var(--color-foreground));
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
  }

  /* Smooth color transitions for theme switching */
  html {
    color-scheme: light;
  }

  html.dark {
    color-scheme: dark;
  }
}

/* ===== Component Utilities ===== */
@layer components {
  /* Primary Button */
  .btn-primary {
    background-color: hsl(var(--color-primary));
    color: hsl(var(--color-primary-foreground));
    padding: 0.5rem 1rem;
    border-radius: var(--radius-md);
    font-weight: 500;
    transition: all 0.2s ease;
  }

  .btn-primary:hover {
    filter: brightness(0.9);
  }

  .btn-primary:focus-visible {
    outline: 2px solid hsl(var(--color-ring));
    outline-offset: 2px;
  }

  /* Secondary Button */
  .btn-secondary {
    background-color: hsl(var(--color-secondary));
    color: hsl(var(--color-secondary-foreground));
    padding: 0.5rem 1rem;
    border-radius: var(--radius-md);
    font-weight: 500;
    transition: all 0.2s ease;
  }

  .btn-secondary:hover {
    filter: brightness(0.95);
  }

  /* Ghost Button */
  .btn-ghost {
    background-color: transparent;
    color: hsl(var(--color-foreground));
    padding: 0.5rem 1rem;
    border-radius: var(--radius-md);
    font-weight: 500;
    transition: all 0.2s ease;
  }

  .btn-ghost:hover {
    background-color: hsl(var(--color-surface-hover));
  }

  /* Card */
  .card {
    background-color: hsl(var(--color-surface));
    border: 1px solid hsl(var(--color-border));
    border-radius: var(--radius-lg);
    padding: 1rem;
  }

  .card-elevated {
    background-color: hsl(var(--color-surface-elevated));
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  }

  /* Input */
  .input {
    background-color: hsl(var(--color-input));
    border: 1px solid hsl(var(--color-border));
    border-radius: var(--radius-md);
    padding: 0.5rem 0.75rem;
    color: hsl(var(--color-foreground));
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
  }

  .input:focus {
    border-color: hsl(var(--color-ring));
    box-shadow: 0 0 0 2px hsl(var(--color-ring) / 0.2);
    outline: none;
  }

  .input::placeholder {
    color: hsl(var(--color-muted-foreground));
  }

  /* Badge */
  .badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius);
    font-size: 0.75rem;
    font-weight: 500;
    background-color: hsl(var(--color-muted));
    color: hsl(var(--color-muted-foreground));
  }

  .badge-primary {
    background-color: hsl(var(--color-primary) / 0.1);
    color: hsl(var(--color-primary));
  }

  .badge-success {
    background-color: hsl(var(--color-success) / 0.1);
    color: hsl(var(--color-success));
  }

  .badge-error {
    background-color: hsl(var(--color-error) / 0.1);
    color: hsl(var(--color-error));
  }

  .badge-warning {
    background-color: hsl(var(--color-warning) / 0.1);
    color: hsl(var(--color-warning));
  }
}