/* ── kazusa home portal — shared styles ── */

/* ============ Design Tokens ============ */
:root {
  /* Surface */
  --bg: #fafafa; --card-bg: #ffffff;
  --border: #e5e7eb;

  /* Text hierarchy: primary / secondary / tertiary */
  --text: #171717; --text-muted: #6f6f73; --text-subtle: #a3a3a3;

  --hover-bg: #f5f5f5;

  /* Elevation: rest vs hover (two-tier) */
  --shadow-1: 0 1px 2px rgba(15,15,20,.04), 0 0 0 1px rgba(15,15,20,.03);
  --shadow-2: 0 4px 16px -2px rgba(15,15,20,.08), 0 2px 6px -2px rgba(15,15,20,.05);

  /* Motion */
  --ease-out: cubic-bezier(0.32, 0.72, 0, 1);
  --dur-fast: 160ms; --dur-med: 260ms;

  /* Typography */
  --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;

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

  /* Accents & status */
  --danger: #ef4444; --success: #22c55e; --primary: #3b82f6; --warning: #f59e0b;
  --primary-foreground: #ffffff; --danger-foreground: #ffffff;
  --ring: color-mix(in srgb, var(--primary) 45%, transparent);

  /* Tinted surfaces (info/warn/err) — pages must use these instead of hex */
  --info-bg: #eff6ff;   --info-text: #1e40af;  --info-border: #bfdbfe;
  --warn-bg: #fffbeb;   --warn-text: #92400e;  --warn-border: #fde68a;
  --err-bg: #fef2f2;    --err-text: #991b1b;   --err-border: #fecaca;
}
/* auto + system dark */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --bg: #0a0a0a; --card-bg: #171717;
    --border: #262626;
    --text: #fafafa; --text-muted: #a3a3a3; --text-subtle: #525252; --hover-bg: #1a1a1a;
    --shadow-1: 0 1px 2px rgba(0,0,0,.25), 0 0 0 1px rgba(255,255,255,.04);
    --shadow-2: 0 6px 20px -4px rgba(0,0,0,.45), 0 2px 6px -2px rgba(0,0,0,.3);
    --danger: #f87171; --primary: #60a5fa; --warning: #fbbf24;
    --primary-foreground: #0f172a; --danger-foreground: #450a0a;
    --ring: color-mix(in srgb, var(--primary) 55%, transparent);

    --info-bg: #172554;  --info-text: #93c5fd;  --info-border: #1e3a5f;
    --warn-bg: #451a03;  --warn-text: #fbbf24;  --warn-border: #78350f;
    --err-bg: #450a0a;   --err-text: #fca5a5;   --err-border: #7f1d1d;
  }
}
/* manual dark */
:root[data-theme="dark"] {
  --bg: #0a0a0a; --card-bg: #171717;
  --border: #262626;
  --text: #fafafa; --text-muted: #a3a3a3; --text-subtle: #525252; --hover-bg: #1a1a1a;
  --shadow-1: 0 1px 2px rgba(0,0,0,.25), 0 0 0 1px rgba(255,255,255,.04);
  --shadow-2: 0 6px 20px -4px rgba(0,0,0,.45), 0 2px 6px -2px rgba(0,0,0,.3);
  --danger: #f87171; --primary: #60a5fa; --warning: #fbbf24;
  --primary-foreground: #0f172a; --danger-foreground: #450a0a;
  --ring: color-mix(in srgb, var(--primary) 55%, transparent);

  --info-bg: #172554;  --info-text: #93c5fd;  --info-border: #1e3a5f;
  --warn-bg: #451a03;  --warn-text: #fbbf24;  --warn-border: #78350f;
  --err-bg: #450a0a;   --err-text: #fca5a5;   --err-border: #7f1d1d;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  font-family: var(--font-ui);
  background: var(--bg); color: var(--text); -webkit-tap-highlight-color: transparent;
}

a:not(.btn) { color: inherit; }

/* Lucide icons inherit the surrounding UI color and align with text controls. */
.lucide-icon, .lucide {
  width: 1em; height: 1em; stroke-width: 1.9;
  flex: 0 0 auto; vertical-align: -0.14em;
}
.btn .lucide { width: 1.05em; height: 1.05em; }

/* ── Buttons — shadcn/ui Button spec (static port) ── */
/* Base: shadcn button core — inline-flex, h-9, px-4, text-sm, font-medium,
   rounded-md, shadow-sm, transition-colors, focus-visible ring, disabled 50% */
.btn, a.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  white-space: nowrap; cursor: pointer;
  height: 2.25rem;                    /* h-9 = 36px */
  padding: 0 1rem;                    /* px-4 */
  border: 1px solid transparent;
  border-radius: 6px;                 /* rounded-md */
  background: var(--primary); color: var(--primary-foreground);
  font-size: 0.875rem; font-weight: 500; line-height: 1; font-family: inherit;
  text-decoration: none;
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.btn:focus-visible, a.btn:focus-visible {
  outline: 2px solid var(--ring); outline-offset: 2px;
}
.btn:disabled, .btn:disabled:hover, a.btn:disabled, a.btn:disabled:hover {
  opacity: 0.5; pointer-events: none;
  background: var(--primary); color: var(--primary-foreground);
}
/* variants */
.btn-outline, a.btn-outline {
  background: var(--card-bg); border-color: var(--border); color: var(--text);
}
.btn-outline:hover:not(:disabled), a.btn-outline:hover:not(:disabled) {
  background: var(--hover-bg); color: var(--text);
}
.btn-destructive, a.btn-destructive {
  background: var(--danger); color: var(--danger-foreground);
}
.btn-destructive:hover:not(:disabled), a.btn-destructive:hover:not(:disabled) {
  background: color-mix(in srgb, var(--danger) 90%, transparent);
}
.btn-outline-destructive, a.btn-outline-destructive {
  background: none; border-color: var(--danger); color: var(--danger);
}
.btn-outline-destructive:hover:not(:disabled), a.btn-outline-destructive:hover:not(:disabled) {
  background: var(--danger); color: var(--danger-foreground);
}
.btn-ghost, a.btn-ghost {
  background: none; color: var(--text); box-shadow: none;
}
.btn-ghost:hover:not(:disabled), a.btn-ghost:hover:not(:disabled) {
  background: var(--hover-bg);
}
.btn-link, a.btn-link {
  background: none; color: var(--primary); box-shadow: none;
  height: auto; padding: 0; text-decoration: underline; text-underline-offset: 4px;
}
.btn-link:hover:not(:disabled), a.btn-link:hover:not(:disabled) { text-decoration: underline; }
/* sizes */
.btn-sm, a.btn-sm { height: 2rem; padding: 0 0.75rem; font-size: 0.75rem; border-radius: 6px; }
.btn-lg, a.btn-lg { height: 2.5rem; padding: 0 2rem; }
.btn-icon, a.btn-icon { height: 2.25rem; width: 2.25rem; padding: 0; }
.btn .lucide { width: 1.05em; height: 1.05em; }

.badge { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 500; }
.badge-admin { background: #dbeafe; color: #1d4ed8; }
.badge-user { background: #f3f4f6; color: #6b7280; }
.badge-custom { background: #fef3c7; color: #92400e; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .badge-admin { background: #1e3a5f; color: #93c5fd; }
  :root:not([data-theme]) .badge-user { background: #262626; color: #a3a3a3; }
  :root:not([data-theme]) .badge-custom { background: #422006; color: #fbbf24; }
}
:root[data-theme="dark"] .badge-admin { background: #1e3a5f; color: #93c5fd; }
:root[data-theme="dark"] .badge-user { background: #262626; color: #a3a3a3; }
:root[data-theme="dark"] .badge-custom { background: #422006; color: #fbbf24; }

.msg { padding: 8px 12px; border-radius: 6px; font-size: 13px; margin-bottom: 12px; display: none; }
.msg-ok { background: var(--info-bg); color: var(--info-text); }
.msg-err { background: var(--err-bg); color: var(--err-text); }

/* Shared announcement banner styles — indexed.html imports via tokens, no page-level hex */
.announcement {
  width: 100%; max-width: 1060px; margin: 0 24px; padding: 10px 16px;
  border-radius: var(--radius-sm); font-size: 13px; line-height: 1.5;
  display: none; align-items: center; gap: 8px;
}
.announcement.info { background: var(--info-bg); color: var(--info-text); border: 1px solid var(--info-border); }
.announcement.warn { background: var(--warn-bg); color: var(--warn-text); border: 1px solid var(--warn-border); }
.announcement.error { background: var(--err-bg); color: var(--err-text); border: 1px solid var(--err-border); }
.announcement .dismiss { margin-left: auto; cursor: pointer; opacity: .6; font-size: 16px; background: none; border: none; color: inherit; padding: 2px; }

/* Health badges (portal cards) */
.badge-health-healthy { background: var(--success); color: #fff; }
.badge-health-unhealthy { background: transparent; color: var(--err-text); border: 1px solid var(--err-border); background: var(--err-bg); }
.badge-health-unknown { background: transparent; color: var(--text-muted); border: 1px solid var(--border); }

/* ── Theme toggle ── */
.theme-toggle {
  position: fixed; top: 16px; right: 16px; z-index: 999;
  width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid var(--border); background: var(--card-bg);
  color: var(--text-muted); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
  box-shadow: var(--shadow-1);
}
.theme-toggle:hover { background: var(--hover-bg); color: var(--text); }
.theme-toggle .lucide { width: 17px; height: 17px; }

/* Motion accessibility */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}