/* Base: variables, reset, typography, focus. Mobile-first. */

:root {
  --c-primary: #1e40af;
  --c-primary-hover: #1c3a9e;
  --c-normal: #2563eb;      /* NORMAL hours */
  --c-normal-bg: #dbeafe;
  --c-normal-text: #1e3a8a;
  --c-extra: #ea580c;       /* EXTRA hours */
  --c-extra-bg: #ffedd5;
  --c-extra-text: #9a3412;
  --c-bg: #f4f6fa;
  --c-surface: #ffffff;
  --c-text: #1f2937;
  --c-muted: #5b6572;
  --c-border: #dbe1ea;
  --c-danger: #dc2626;
  --c-danger-bg: #fee2e2;
  --c-success: #15803d;
  --c-success-bg: #dcfce7;
  --radius: 8px;
  --radius-sm: 5px;
  --shadow: 0 4px 16px rgb(15 23 42 / 0.12);
  --font: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--c-text);
  background: var(--c-bg);
  min-height: 100dvh;
}

h1,
h2,
h3 {
  margin: 0 0 0.5rem;
  line-height: 1.25;
}

p {
  margin: 0 0 0.75rem;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

button {
  font: inherit;
  color: inherit;
}

input,
select,
textarea {
  font: inherit;
}

[x-cloak] {
  display: none !important;
}

:focus-visible {
  outline: 3px solid var(--c-normal);
  outline-offset: 2px;
}

.noscript {
  margin: 2rem auto;
  max-width: 26rem;
  padding: 1rem;
  text-align: center;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
}

.boot {
  display: grid;
  place-items: center;
  min-height: 100dvh;
  color: var(--c-muted);
}