/* ============================================================
   BASE — CSS variables, body, typography, labels
   ============================================================ */

:root {
  /* Skeleton header offset (tweak if DT controls height changes) */
  --dt-header-h: 123px;

  /* Theme variables (light defaults) */
  --color-dark: #505050;
  --color-dark-background: #202020;

  --color-light: #ffffff;
  --img-dark: 0;
  --img-light: 1;

  --color-text: var(--color-dark);
  --color-border: #ffffff;

  --color-background: #ffffff;
  --color-background2: #ffffff;
  --color-image: var(--img-dark);

  /* Brand palette */
  --color-primary: #6366f1;
  --color-primary-hover: #4f46e5;
  --color-primary-light: #a78bfa;
  --color-accent: #f2c21a;
  --color-success: #22c55e;
  --color-danger: #ef4444;
  --color-warning: #f59e0b;
  --color-muted: #6b7280;

  /* Neutral palette */
  --color-neutral-50: #f9fafb;
  --color-neutral-200: #e5e7eb;
  --color-neutral-300: #d1d5db;
  --color-neutral-400: #9ca3af;
  --color-neutral-500: #6b7280;
  --color-neutral-600: #4b5563;
  --color-neutral-700: #374151;
  --color-neutral-800: #1f2937;
  --color-neutral-900: #111827;

  /* Border-radius scale */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-2xl: 24px;
  --radius-full: 999px;

  /* Shadow scale */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 10px 24px rgba(0, 0, 0, 0.15), 0 4px 8px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.2), 0 8px 16px rgba(0, 0, 0, 0.12);

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-normal: 200ms ease;
  --transition-slow: 300ms ease;

  /* Focus ring */
  --focus-ring: 0 0 0 3px rgba(99, 102, 241, 0.35);
}

html {
  font-size: 18px;
}

body {
  font-family: "Nunito", sans-serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;

  background-color: var(--color-background);
  color: var(--color-text);
  transition: background-color .25s ease, color .25s ease;
}

a, h1, h2 { color: #377ba8; }
a { font-size: 1.3em; color: var(--color-text); transition: background-color var(--transition-normal), color var(--transition-normal); text-decoration: none; }
h1 { font-size: 1.2em; color: var(--color-text); text-align: left; font-weight: normal; margin: 0; }
h2 { font-size: 1.8em; color: var(--color-text); padding: 8px; margin: 0; }
h3 { color: var(--color-text); font-size: 1.1em; margin-top: 0; }
h4 { color: var(--color-text); font-size: 1.0em; margin: 0; }
p { margin: 0; }

label {
  font-size: 1rem;
  color: var(--color-text);
  margin-right: 30px;
  transition: background-color .25s ease, color .25s ease;
}