/*
 * Kottalapozó design tokens.
 * Every component reads from these variables; no raw colour or spacing
 * values should appear in component styles.
 */
:root {
  /* Surfaces — charcoal base, slate layers */
  --color-bg: #111317;
  --color-surface-1: #171a1f;
  --color-surface-2: #1d2128;
  --color-surface-3: #242a32;
  --color-overlay: rgb(6 8 10 / 72%);

  /* Lines */
  --color-border: #262c34;
  --color-border-strong: #353d48;
  /* Form controls and secondary buttons — at least 3:1 against every surface (WCAG 1.4.11) */
  --color-border-control: #6e7884;

  /* Text */
  --color-text: #e7e9ec;
  --color-text-muted: #a1a9b3;
  /* Subtle text stays at least 4.5:1 on every surface, including surface-3 (WCAG AA) */
  --color-text-subtle: #8a939e;

  /* Accent — restrained teal */
  --color-accent: #3fae9f;
  --color-accent-hover: #52bdaf;
  --color-accent-active: #36998c;
  --color-accent-soft: rgb(63 174 159 / 12%);
  --color-accent-line: rgb(63 174 159 / 35%);
  --color-on-accent: #08130f;

  /* Status */
  --color-status-online: #4fb98a;
  --color-status-pending: #c9a54a;
  --color-status-offline: #cc6f68;

  /* Focus */
  --focus-ring: 0 0 0 2px var(--color-bg), 0 0 0 4px var(--color-accent);

  /* Typography */
  --font-sans: "Inter", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system,
    "Helvetica Neue", Arial, sans-serif;
  --font-display: "Inter Display", "Segoe UI Variable Display", "Segoe UI", system-ui,
    -apple-system, "Helvetica Neue", Arial, sans-serif;

  --text-xs: 0.75rem;    /* 12 */
  --text-sm: 0.8125rem;  /* 13 */
  --text-base: 0.9375rem;/* 15 */
  --text-md: 1.0625rem;  /* 17 */
  --text-lg: 1.25rem;    /* 20 */
  --text-xl: 1.5rem;     /* 24 */
  --text-2xl: 1.75rem;   /* 28 */

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;

  --leading-tight: 1.15;
  --leading-snug: 1.35;
  --leading-normal: 1.55;

  --tracking-tight: -0.02em;
  --tracking-label: 0.08em;

  /* Spacing — 4px base */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;

  /* Layout */
  --content-max: 82rem;
  --gutter: clamp(1rem, 0.4rem + 2.6vw, 3rem);
  --header-height: 4rem;

  /* Shape */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-full: 999px;
  --border-width: 1px;

  /* Elevation — used sparingly, mainly for the modal */
  --shadow-modal: 0 24px 64px rgb(0 0 0 / 45%);

  /* Motion */
  --duration-fast: 120ms;
  --duration-base: 180ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-base: 0ms;
  }
}