/* /themes/pokemon/assets/css/theme-base.css
   Base components + design tokens (overridden by theme-*.css). */

:root {
  /* Brand */
  --color-brand:        #2563eb;
  --color-brand-600:    #2563eb; /* base */
  --color-brand-700:    #1d4ed8; /* hover */
  --color-accent:       #f59e0b;

  /* UI */
  --bg-page:            #ffffff;
  --text-base:          #0f172a;
  --text-muted:         #475569;
  --card-bg:            #ffffff;
  --card-border:        #e5e7eb;

  /* Status */
  --ok:   #16a34a;
  --warn: #ea580c;
  --err:  #dc2626;

  /* Shape */
  --radius: 1rem;
  --shadow: 0 10px 25px rgba(2,6,23,.08);
}

/* Base */
@layer base {
  html, body { background: var(--bg-page); color: var(--text-base); }
  a { color: var(--color-brand-600); }
  a:hover { color: var(--color-brand-700); }
}

/* Components */
@layer components {

  /* Buttons */
  .btn {
    @apply inline-flex items-center justify-center font-semibold px-4 py-2 transition;
    border-radius: var(--radius); box-shadow: var(--shadow);
  }
  .btn:disabled { @apply opacity-60 cursor-not-allowed; box-shadow: none; }

  .btn-primary { background: var(--color-brand-600); color: #fff; }
  .btn-primary:hover { background: var(--color-brand-700); }

  .btn-outline {
    background: transparent; color: var(--color-brand-600);
    border: 1px solid var(--color-brand-600);
  }
  .btn-outline:hover { background: var(--color-brand-600); color: #fff; }

  .btn-danger  { background: var(--err); color: #fff; }
  .btn-danger:hover { filter: brightness(.95); }

  /* Badges */
  .badge {
    @apply inline-flex items-center px-2 py-0.5 text-xs font-semibold;
    border-radius: calc(var(--radius) / 1.75);
    background: var(--card-bg); color: var(--text-muted);
    border: 1px solid var(--card-border);
  }
  .badge-ok   { background: color-mix(in srgb, var(--ok) 12%, #fff); color: var(--ok); border-color: color-mix(in srgb, var(--ok) 40%, #fff); }
  .badge-warn { background: color-mix(in srgb, var(--warn) 12%, #fff); color: var(--warn); border-color: color-mix(in srgb, var(--warn) 40%, #fff); }
  .badge-err  { background: color-mix(in srgb, var(--err) 12%, #fff); color: var(--err); border-color: color-mix(in srgb, var(--err) 40%, #fff); }

  /* Cards */
  .card {
    @apply p-4;
    background: var(--card-bg); border: 1px solid var(--card-border);
    border-radius: var(--radius); box-shadow: var(--shadow);
  }

  /* Forms */
  .form-input, .form-select, .form-textarea {
    @apply w-full px-3 py-2 outline-none;
    background: #fff; color: var(--text-base);
    border: 1px solid var(--card-border);
    border-radius: calc(var(--radius) * .75);
  }
  .form-input:focus, .form-select:focus, .form-textarea:focus {
    border-color: var(--color-brand-600);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-brand-600) 22%, transparent);
  }

  /* Alerts */
  .alert { @apply p-3; border-radius: var(--radius); }
  .alert-ok   { background: color-mix(in srgb, var(--ok) 10%, #fff); border: 1px solid color-mix(in srgb, var(--ok) 40%, #fff); color: var(--ok); }
  .alert-warn { background: color-mix(in srgb, var(--warn) 10%, #fff); border: 1px solid color-mix(in srgb, var(--warn) 40%, #fff); color: var(--warn); }
  .alert-err  { background: color-mix(in srgb, var(--err) 10%, #fff); border: 1px solid color-mix(in srgb, var(--err) 40%, #fff); color: var(--err); }
}

/* Safe defaults for legacy markup */
button[type=submit], input[type=submit] { @apply btn btn-primary; }