:root,
[data-theme='light'] {
  color-scheme: light;
  --font-ui: 'Figtree', 'Segoe UI', sans-serif;
  --font-brand: 'Fraunces', Georgia, serif;
  --ink: #1c1917;
  --muted: #57534e;
  --paper: #f4f2ee;
  --panel: #fffcf7;
  --accent: #0f6b63;
  --accent-dark: #0a524c;
  --danger: #a12622;
  --line: #d6d0c8;
  --shadow: 0 16px 36px rgba(28, 25, 23, 0.1);

  --app-bg: #e9ece6;
  --header-bg: #fffcf7;
  --sidebar-bg: #fffcf7;
  --surface: #fffcf7;
  --surface-2: #f1f0eb;
  --surface-3: #e8e6e0;
  --surface-muted: #f7f6f2;
  --hover: #eceae4;
  --border: #d4d0c8;
  --border-strong: #c4bfb6;
  --input-bg: #f0eee9;
  --input-text: #57534e;
  --chip: #e4efed;
  --success-bg: #e4f2e8;
  --success-ink: #1b5e20;
  --danger-bg: #fdecea;
  --danger-ink: #8a1f17;

  --cal-border: #ddd8d0;
  --cal-page-bg: #fffcf7;
  --cal-neutral-bg: #f3f1ec;
  --cal-today-bg: rgba(15, 107, 99, 0.09);
  --fc-button-bg: #fffcf7;
  --fc-button-hover: #eceae4;
  --fc-col-header: #44403c;

  --mini-title: #1c1917;
  --mini-day: #292524;
  --mini-other: #a8a29e;
  --mini-muted: #78716c;
  --mini-chevron: #a8a29e;
  --mini-week: #e7e5e0;
  --mini-selected: #0f6b63;

  --overlay: rgba(28, 25, 23, 0.42);
  --modal-bg: #fffcf7;
  --modal-muted: #78716c;
  --comment-bg: #f3f1ec;

  --body-gradient: radial-gradient(
      circle at 12% 0%,
      rgba(15, 107, 99, 0.11),
      transparent 42%
    ),
    linear-gradient(165deg, #e7ebe4 0%, var(--paper) 48%, #e4e8ef 100%);

  font-family: var(--font-ui);
}

[data-theme='dark'] {
  color-scheme: dark;
  --ink: #f5f2eb;
  --muted: #a8a29e;
  --paper: #12100e;
  --panel: #1c1917;
  --accent: #3daba0;
  --accent-dark: #5ec4b9;
  --danger: #f07178;
  --line: #3f3a36;
  --shadow: 0 18px 40px rgba(0, 0, 0, 0.5);

  --app-bg: #0f0e0c;
  --header-bg: #1a1714;
  --sidebar-bg: #1a1714;
  --surface: #1c1917;
  --surface-2: #141210;
  --surface-3: #24201c;
  --surface-muted: #1c1917;
  --hover: #2a2622;
  --border: #3f3a36;
  --border-strong: #57534e;
  --input-bg: #292524;
  --input-text: #d6d3d1;
  --chip: #292524;
  --success-bg: #1b3a24;
  --success-ink: #9be39b;
  --danger-bg: #3a1d1d;
  --danger-ink: #f0a0a0;

  --cal-border: #3f3a36;
  --cal-page-bg: #1c1917;
  --cal-neutral-bg: #24201c;
  --cal-today-bg: rgba(61, 171, 160, 0.14);
  --fc-button-bg: #292524;
  --fc-button-hover: #3f3a36;
  --fc-col-header: #e7e5e4;

  --mini-title: #f5f2eb;
  --mini-day: #f5f2eb;
  --mini-other: #78716c;
  --mini-muted: #a8a29e;
  --mini-chevron: #a8a29e;
  --mini-week: #292524;
  --mini-selected: #3daba0;

  --overlay: rgba(0, 0, 0, 0.62);
  --modal-bg: #1c1917;
  --modal-muted: #a8a29e;
  --comment-bg: #292524;

  --body-gradient: radial-gradient(
      circle at 12% 0%,
      rgba(61, 171, 160, 0.14),
      transparent 44%
    ),
    linear-gradient(165deg, #0c0b09 0%, var(--paper) 50%, #12151a 100%);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  background: var(--body-gradient);
}

.login-page {
  display: grid;
  place-items: center;
  padding: 2rem;
}

.login-card {
  width: min(100%, 420px);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow);
  padding: 2rem;
  position: relative;
}

.brand {
  margin: 0 0 0.35rem;
  font-family: var(--font-brand, Georgia, serif);
  letter-spacing: 0.02em;
  text-transform: none;
  font-size: 0.95rem;
  color: var(--accent);
  font-weight: 650;
  font-variation-settings: 'SOFT' 40, 'WONK' 0.4;
}

.brand-logo {
  display: block;
  height: auto;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}

.brand-logo-auth {
  width: min(100%, 14rem);
  height: auto;
  margin: 0 auto 0.35rem;
  border-radius: 10px;
}

h1 {
  margin: 0;
  font-size: 1.75rem;
}

.lede {
  margin: 0.4rem 0 1.5rem;
  color: var(--muted);
}

label {
  display: grid;
  gap: 0.35rem;
  margin-bottom: 1rem;
  font-size: 0.9rem;
}

input,
select,
textarea {
  width: 100%;
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--line);
  border-radius: 4px;
  font: inherit;
  background: var(--surface);
  color: var(--ink);
}

button {
  width: 100%;
  margin-top: 0.5rem;
  padding: 0.8rem 1rem;
  border: 0;
  border-radius: 4px;
  background: var(--accent);
  color: #fff;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

button:hover {
  background: var(--accent-dark);
}

.error {
  margin-top: 1rem;
  color: var(--danger);
  font-size: 0.9rem;
}

#company-choice {
  margin-top: 1rem;
}

.choice-btn {
  width: 100%;
  margin-top: 0.5rem;
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line);
}

.choice-btn:hover {
  background: var(--hover);
}

.theme-toggle {
  width: auto;
  margin: 0;
  padding: 0.4rem 0.7rem;
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}

.theme-toggle:hover {
  background: var(--hover);
}

.login-card .theme-toggle {
  position: absolute;
  top: 0.85rem;
  right: 0.85rem;
}