/* Padel Park — shared design tokens and primitives.
   Loaded by both the public app and the admin area so the brand colours,
   type scale and spacing grid are defined in exactly one place.

   Two typefaces throughout: the system UI stack, and a monospace for PINs,
   scores and other figures. */

:root {
  /* Brand red is 4.0:1 on white — fine for fills, borders and text at 24px+,
     not for body copy. --red-text is the darkened variant for small text. */
  --red: #ff0000;
  --red-text: #cc0000;      /* 5.9:1 on white */
  --red-dark: #b30000;      /* hover/active */

  --ink: #1a1a1a;           /* 16.6:1 */
  --muted: #5a5a5a;         /* 7.0:1 */
  --line: #d9d9d9;
  --bg: #ffffff;
  --surface: #f7f7f7;
  --surface-2: #efefef;

  /* 8px grid */
  --s1: 8px; --s2: 16px; --s3: 24px; --s4: 32px; --s5: 40px; --s6: 48px;

  /* Type scale: 12 / 14 / 16 / 20 / 24 / 32 / 48 */
  --t-xs: 12px; --t-sm: 14px; --t-md: 16px; --t-lg: 20px;
  --t-xl: 24px; --t-2xl: 32px; --t-3xl: 48px;

  --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --radius: 8px;
}

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

/* Buttons, inputs and selects do not inherit the page font on their own — the
   browser gives them its own. Without this the box tabs rendered in Arial,
   quietly making a third typeface. */
button, input, select, textarea { font-family: inherit; font-size: inherit; }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: var(--t-md);
  line-height: 1.5;
  color: var(--ink);
  background: var(--bg);
  -webkit-text-size-adjust: 100%;
}

/* Focus is always visible, on every interactive element. */
:focus-visible {
  outline: 3px solid var(--red);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------- Status: colour plus a label, never colour alone ---------- */

.status { display: inline-flex; align-items: center; gap: var(--s1); font-size: var(--t-xs); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em; padding: var(--s1);
  border-radius: 999px; border: 1px solid; }
.status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.status-active { color: #0a6b2e; border-color: #0a6b2e; background: #eaf7ee; }
.status-draft { color: var(--muted); border-color: var(--muted); background: var(--surface); }
.status-closed { color: var(--ink); border-color: var(--ink); background: var(--surface-2); }
.status-withdrawn { color: var(--red-text); border-color: var(--red-text); background: #fff0f0; }
.status-withdrawn::before { border-radius: 0; }   /* shape differs too, not just colour */

/* ---------- Messages ---------- */

.msg { padding: var(--s2); border-radius: var(--radius); font-size: var(--t-sm);
  border-left: 4px solid; margin-bottom: var(--s2); }
.msg-error { background: #fff0f0; border-color: var(--red-text); color: var(--ink); }
.msg-ok { background: #eaf7ee; border-color: #0a6b2e; color: var(--ink); }
.msg-warn { background: #fff8e6; border-color: #8a6100; color: var(--ink); }
.msg strong { display: block; margin-bottom: var(--s1); }
.msg ul { margin: var(--s1) 0 0; padding-left: var(--s3); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}