/* ==========================================================================
   style.css — tokens de design, reset e tipografia
   Paleta derivada da logo MarcosZita Tennis (verde-escuro + verde-limão).
   ========================================================================== */

:root {
  /* Marca */
  --green-950: #06261A;
  --green-900: #0B3D22;
  --green-800: #0F5A32;
  --green-700: #16713F;
  --green-600: #1E8A4C;
  --green-100: #E3F1E7;
  --green-50: #F1F8F3;
  --lime-600: #6FA92A;
  --lime-500: #8CC63F;
  --lime-400: #A6D65A;
  --lime-100: #EEF7E0;

  /* Superfícies e texto */
  --bg: #F3F6F2;
  --surface: #FFFFFF;
  --surface-2: #F7FAF7;
  --border: #E3E9E4;
  --border-strong: #CBD6CE;
  --text: #13241A;
  --text-soft: #34473B;
  --text-muted: #5F6F66;

  /* Estados */
  --success: #1E8A4C;
  --success-bg: #E3F4E9;
  --danger: #C23A4B;
  --danger-bg: #FCE8EA;
  --warning: #B7791F;
  --warning-bg: #FDF3DC;
  --info: #2A6FA0;
  --info-bg: #E4F0F8;
  --neutral: #5F6F66;
  --neutral-bg: #EDF1EE;

  /* Gráficos (lidos por js/charts.js) */
  --chart-1: #0F5A32;
  --chart-2: #8CC63F;
  --chart-3: #E3A92B;
  --chart-4: #D1495B;
  --chart-5: #2E86AB;
  --chart-6: #6C5B7B;
  --chart-7: #3AAFA9;
  --chart-8: #F28C28;

  /* Forma */
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 16px;
  --shadow-xs: 0 1px 2px rgba(11, 61, 34, .06);
  --shadow-sm: 0 1px 3px rgba(11, 61, 34, .08), 0 1px 2px rgba(11, 61, 34, .04);
  --shadow: 0 4px 16px rgba(11, 61, 34, .08), 0 1px 3px rgba(11, 61, 34, .05);
  --shadow-lg: 0 20px 48px rgba(6, 38, 26, .22);

  --sidebar-w: 264px;
  --topbar-h: 64px;
  --gutter: 28px;
  --ease: cubic-bezier(.2, .7, .2, 1);

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

  color-scheme: light;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-variant-numeric: tabular-nums;
}

body.no-scroll { overflow: hidden; }

h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); color: var(--text); letter-spacing: -.01em; line-height: 1.25; }
h1 { font-size: 24px; font-weight: 700; }
h2 { font-size: 18px; font-weight: 700; }
h3 { font-size: 15px; font-weight: 650; }
h4 { font-size: 14px; font-weight: 650; }
p { margin: 0; }

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
code { font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: 12px; background: var(--neutral-bg); padding: 2px 6px; border-radius: 6px; }
dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

:focus-visible { outline: 2px solid var(--lime-500); outline-offset: 2px; border-radius: 6px; }

::selection { background: var(--lime-100); color: var(--green-900); }

/* ------------------------------ Utilitários ----------------------------- */
.icon { width: 18px; height: 18px; flex: none; stroke-width: 1.9; }
.muted { color: var(--text-muted); }
.text-success { color: var(--success); }
.text-danger { color: var(--danger); }
.text-warning { color: var(--warning); }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.is-hidden { display: none !important; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 12px; top: -48px; z-index: 200; padding: 8px 14px;
  background: var(--green-900); color: #fff; border-radius: var(--radius-sm); transition: top .15s;
}
.skip-link:focus { top: 12px; }
.link { color: var(--green-700); font-weight: 600; }
.link:hover { text-decoration: underline; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}