/* Global design tokens */
:root {
  /* Typography */
  --font-sans: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --font-serif: "Source Serif 4", ui-serif, Georgia, "Times New Roman", Times, serif;
  --font-body: var(--font-sans);
  --font-heading: var(--font-serif);
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;

  --text-xs: 0.75rem;
  --text-sm: 0.85rem;
  --text-base: 0.95rem;
  --text-lg: 1.125rem;
  --text-xl: 1.3rem;
  --text-2xl: 1.6rem;
  --text-3xl: 1.9rem;
  --text-h1: clamp(1.9rem, 4vw, 2.3rem);
  --text-h2: clamp(1.3rem, 2.8vw, 1.6rem);
  --text-h3: clamp(1.05rem, 2vw, 1.2rem);

  --line-height-body: 1.6;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Colors */
  --color-bg: #0B1220;
  --color-bg-alt: #000000;
  --color-surface: #0F1A2E;
  --color-surface-2: #111111;
  --color-nav: rgba(15, 23, 42, 0.92);

  --color-text: #E8ECF3;
  --color-text-strong: #ffffff;
  --color-text-muted: rgba(232, 236, 243, 0.78);
  --color-link: #cfe3ff;
  --color-link-hover: #e6f0ff;

  --color-border: rgba(255, 255, 255, 0.10);
  --color-hover: rgba(255, 255, 255, 0.05);
  --color-hover-subtle: rgba(255, 255, 255, 0.03);
  --color-menu-hover: rgba(255, 255, 255, 0.06);

  --color-accent: #7AA6FF;
  --color-accent-soft: rgba(122, 166, 255, 0.12);
  --color-accent-border: rgba(122, 166, 255, 0.35);
  --color-focus-ring: rgba(122, 166, 255, 0.28);

  --color-success: #2ecc71;
  --color-info: #3498db;
  --color-danger: #e74c3c;
  --color-success-bg: #1f3b2d;
  --color-success-text: #cce8d9;
  --color-neutral-bg: rgba(255, 255, 255, 0.12);
  --color-neutral-text: #e5e7eb;
  --color-table-border: rgba(232, 236, 243, 0.14);
  --color-table-row: rgba(122, 166, 255, 0.06);
  --color-table-row-alt: rgba(122, 166, 255, 0.12);
  --color-table-row-hover: rgba(122, 166, 255, 0.18);
  --color-table-header-top: #121b2f;
  --color-table-header-bottom: #0f182b;
  --color-table-card-top: #121b2f;
  --color-table-card-bottom: #0b1324;
  --color-card-top: var(--color-table-card-top);
  --color-card-bottom: var(--color-table-card-bottom);
  --color-input-bg: #0f182b;
  --color-input-bg-focus: #111a2d;
  --color-input-border: var(--color-table-border);
  --color-input-text: var(--color-text-strong);

  --color-button-primary-top: #4b66b6;
  --color-button-primary-bottom: #3d58a8;
  --color-button-primary-hover-top: #4a62ad;
  --color-button-primary-hover-bottom: #344f9f;
  --color-button-primary-text: #f8fafc;

  /* Shadows */
  --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.45);
  --shadow-dropdown: 0 18px 40px rgba(0, 0, 0, 0.55);
  --shadow-glow: 0 0 18px rgba(255, 255, 255, 0.05);
  --shadow-elevated: 0 18px 40px rgba(0, 0, 0, 0.35);

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;

  /* Radii */
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --radius-xl: 14px;
  --radius-pill: 999px;

  /* Legacy aliases (nav.css) */
  --bg-main: var(--color-bg);
  --bg-nav: var(--color-nav);
  --text: var(--color-text);
  --text-muted: var(--color-text-muted);
  --border: var(--color-border);
  --hover: var(--color-hover);
  --menu-bg: var(--color-surface);
  --menu-hover: var(--color-menu-hover);
  --accent: var(--color-accent);
  --focus: var(--color-focus-ring);
}

.btn {
  font-family: var(--font-body);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.01em;
  border-radius: var(--radius-pill);
  padding: 0.55rem 1.2rem;
  border: 1px solid var(--color-border);
  background-color: transparent;
  color: var(--color-text);
  transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

.btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--color-focus-ring);
}

.btn-primary {
  background: linear-gradient(180deg, var(--color-button-primary-top), var(--color-button-primary-bottom));
  color: var(--color-button-primary-text);
  border-color: var(--color-accent-border);
}

.btn-primary:hover,
.btn-primary:focus {
  background: linear-gradient(180deg, var(--color-button-primary-hover-top), var(--color-button-primary-hover-bottom));
  color: var(--color-button-primary-text);
  border-color: var(--color-accent);
}

.btn-secondary {
  background-color: var(--color-surface);
  color: var(--color-text);
  border-color: var(--color-border);
}

.btn-secondary:hover,
.btn-secondary:focus {
  background-color: var(--color-hover);
  color: var(--color-text-strong);
  border-color: var(--color-accent-border);
}

.btn-ghost {
  background-color: transparent;
  border-color: transparent;
  color: var(--color-text-muted);
}

.btn-ghost:hover,
.btn-ghost:focus {
  background-color: var(--color-hover-subtle);
  color: var(--color-text-strong);
}

.btn.btn-sm {
  padding: 0.35rem 0.85rem;
  font-size: var(--text-sm);
  border-radius: var(--radius-md);
}

.form-control,
.input-field,
select.form-control,
textarea.form-control {
  width: 100%;
  padding: 0.85rem 1rem;
  border: 1px solid var(--color-input-border);
  border-radius: var(--radius-sm);
  background-color: var(--color-input-bg);
  color: var(--color-input-text) !important;
  caret-color: var(--color-input-text);
  font-size: var(--text-base);
  line-height: 1.4;
  box-sizing: border-box;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}

.form-control::placeholder,
.input-field::placeholder,
textarea.form-control::placeholder {
  color: var(--color-text-muted);
  opacity: 1;
}

.form-control:focus,
.input-field:focus,
select.form-control:focus,
textarea.form-control:focus {
  border-color: var(--color-accent);
  outline: none;
  box-shadow: 0 0 0 3px var(--color-focus-ring);
  background-color: var(--color-input-bg-focus);
}

input.form-control:-webkit-autofill,
input.input-field:-webkit-autofill,
select.form-control:-webkit-autofill,
textarea.form-control:-webkit-autofill {
  -webkit-text-fill-color: var(--color-input-text);
  box-shadow: 0 0 0 1000px var(--color-input-bg) inset;
  transition: background-color 5000s ease-in-out 0s;
}

input.form-control:-webkit-autofill:focus,
input.input-field:-webkit-autofill:focus,
select.form-control:-webkit-autofill:focus,
textarea.form-control:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--color-input-text);
  box-shadow: 0 0 0 1000px var(--color-input-bg-focus) inset;
}

.form-field {
  position: relative;
  margin-bottom: var(--space-4);
}

.form-field .form-label {
  position: absolute;
  top: 0.85rem;
  left: 1rem;
  background: var(--color-input-bg);
  padding: 0 0.25rem;
  color: var(--color-text-muted);
  font-size: var(--text-base);
  pointer-events: none;
  transition: 0.2s ease all;
}

.form-field .form-control::placeholder,
.form-field .input-field::placeholder {
  color: transparent;
}

.form-field .form-control:focus + .form-label,
.form-field .form-control:not(:placeholder-shown) + .form-label,
.form-field .input-field:focus + .form-label,
.form-field .input-field:not(:placeholder-shown) + .form-label,
.form-field .flatpickr-input.has-value + .form-label,
.form-field .flatpickr-input:focus + .form-label {
  top: -0.55rem;
  left: 0.85rem;
  font-size: var(--text-sm);
  color: var(--color-text-strong);
}