@import 'tailwindcss';

@theme {
  --font-sans: 'Segoe UI', system-ui, sans-serif;
  --color-school: #103d38;
}
:root[data-theme='violet'] { --color-school: #4c1d95; }
:root[data-theme='blue'] { --color-school: #1d4ed8; }
:root[data-theme='orange'] { --color-school: #c2410c; }
:root[data-theme='slate'] { --color-school: #334155; }
:root[data-theme='contrast'] { --color-school: #111827; }
:root[data-theme='contrast'] body { background: #ffffff; color: #111827; }
:root[data-theme='contrast'] header, :root[data-theme='contrast'] .panel, :root[data-theme='contrast'] main article, :root[data-theme='contrast'] table { border-color: #111827; }
:root[data-theme='contrast'] a, :root[data-theme='contrast'] button { text-decoration-thickness: 2px; }
:root[data-theme='night'] { --color-school: #7dd3fc; color-scheme: dark; }
:root[data-theme='night'] body { background:#0f172a; color:#e2e8f0; }
:root[data-theme='night'] header, :root[data-theme='night'] .panel, :root[data-theme='night'] main article, :root[data-theme='night'] table { background:#172033; color:#e2e8f0; border-color:#334155; }
:root[data-theme='night'] h1, :root[data-theme='night'] h2, :root[data-theme='night'] h3 { color:#f8fafc; }
:root[data-theme='night'] .muted,
:root[data-theme='night'] .text-slate-500,
:root[data-theme='night'] .text-slate-600,
:root[data-theme='night'] .text-slate-700 { color:#cbd5e1 !important; }

@layer base {
  body { @apply m-0 bg-stone-50 text-slate-800 antialiased; }
  a, button, select, input { @apply focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-teal-700; }
  h1 { @apply text-3xl font-semibold tracking-tight text-school sm:text-4xl; }
  h2 { @apply text-xl font-semibold tracking-tight text-school; }
  button { @apply cursor-pointer; }
}

@layer components {
  .panel { @apply rounded-2xl border border-stone-200 bg-white p-5 sm:p-7; }
  .eyebrow { @apply mb-3 text-xs font-semibold tracking-widest text-teal-700 uppercase; }
  .muted { @apply text-sm leading-6 text-slate-500; }
}
::view-transition-old(root),
::view-transition-new(root) { animation-duration: 180ms; }
::view-transition-old(root) { animation-name: fade-out; }
::view-transition-new(root) { animation-name: fade-in; }
@keyframes fade-out { to { opacity: 0; } }
@keyframes fade-in { from { opacity: 0; } }