/* ==========================================================================
   running-dashboard — design tokens (TASK-007; REQ-017; ADR-004)
   --------------------------------------------------------------------------
   Single source of truth for color. Every rule below this block references
   var(--…) only; ADR-004 invariant: the palette changes in exactly one place
   (the :root block).

   Theme: dark, Strava-like anatomy, primary accent = MEDIUM GREEN (Marco's
   spec: "médio, nem tão claro nem tão escuro") in the slot Strava fills with
   orange.

   PENDING-001: the exact green is still under visual review by Marco using
   the pilot mockups in dev/mockups/. Candidates measured (ADR-004):

     A "verde vivo médio"     #26A641  on-primary dark text  5.85:1 (AA);
                                       white text            3.18:1 (FAIL)
     B "verde médio neutro"   #3E9E57  on-primary dark text  5.51:1 (AA)  <- current
     C "verde médio profundo" #2E7D46  white text            5.07:1 (AA);
                                       on-primary dark text  3.66:1 (FAIL)

   Shipped below: Option B, per the ADR-004 preliminary recommendation. If
   another candidate is approved, swap --color-primary/…hover/soft and,
   for C, also set --color-on-primary to #FFFFFF.

   Contrast verified (WCAG 2.1 relative luminance, measured 2026-10-16
   against the values below — AA normal-text pass requires >= 4.5:1):

     text            / bg        15.70:1    text / surface      14.55:1
     text-secondary  / surface    8.05:1    text-muted / surface 4.68:1
     on-primary      / primary    5.51:1    primary / bg         5.49:1
     primary         / surface    5.09:1    success / surface    7.37:1
     warning         / surface    7.88:1    danger / surface     4.90:1
     focus-ring      / bg         6.92:1    focus-ring / surface 6.41:1

   Fonts: system stack only — the CSP allows local bundles; no external
   font/CDN calls.
   ========================================================================== */

:root {
  /* --- surfaces ---------------------------------------------------------- */
  --color-bg: #101418;                 /* page background */
  --color-surface: #171C22;            /* cards */
  --color-surface-elevated: #1E252C;   /* inputs, hover, elevated cards */
  --color-border: #2A323B;

  /* --- text -------------------------------------------------------------- */
  --color-text: #E8EDF2;
  --color-text-secondary: #A8B3BF;
  --color-text-muted: #7C8792;

  /* --- accent: medium green (Option B, ADR-004; PENDING-001) -------------- */
  --color-primary: #3E9E57;
  --color-primary-hover: #4AB266;
  --color-on-primary: #0B1512;
  --color-primary-soft: rgba(62, 158, 87, 0.15);
  --color-primary-soft: color-mix(in srgb, var(--color-primary) 15%, transparent);
  --color-focus-ring: #4AB266;

  /* --- semantic messages --------------------------------------------------- */
  --color-success: #4CBF78;
  --color-warning: #D9A84E;
  --color-danger: #E06060;

  /* --- auxiliary: HR zones Z1 (rest) -> Z5 (max), green-coherent ----------- */
  --zone-1: #3D6FA8;
  --zone-2: #3E9E57;   /* same green as the accent on purpose */
  --zone-3: #D9A84E;
  --zone-4: #E07840;
  --zone-5: #D94848;

  /* --- auxiliary: pace scale (map trace + splits), fast -> slow ------------ */
  --pace-fast: #3E9E57;
  --pace-3: #86B84E;
  --pace-4: #D9A84E;
  --pace-5: #E07840;
  --pace-slow: #D94848;

  /* --- chart traces (Plotly helper in TASK-008 consumes these) -------------- */
  --chart-1: #3E9E57;  /* primary */
  --chart-2: #5B8DB8;
  --chart-3: #D9A84E;
  --chart-4: #9A7BC8;
  --chart-5: #4CB3A9;
  --chart-6: #D94848;

  /* --- typography (system stack; scalable scale) ---------------------------- */
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas,
    "Liberation Mono", monospace;

  --text-xs: 0.75rem;   /* captions, labels        */
  --text-sm: 0.875rem;  /* secondary UI, messages  */
  --text-md: 1rem;      /* body                    */
  --text-lg: 1.25rem;   /* h3 / card highlights    */
  --text-xl: 1.5rem;    /* h2 / page sections      */
  --text-2xl: 2rem;     /* h1 / hero               */

  --lh-tight: 1.25;
  --lh-normal: 1.5;

  --weight-regular: 400;
  --weight-semibold: 600;
  --weight-bold: 700;
  --tracking-caps: 0.08em;  /* for ALL-CAPS micro labels */

  /* --- spacing scale (Marco/TASK-007: 4 / 8 / 16 / 24 / 32) ------------------ */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;

  /* --- radius ---------------------------------------------------------------- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
}

/* ==========================================================================
   Base / component layer — colors ONLY via var()
   ========================================================================== */

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

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--text-md);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
}

.container {
  max-width: 1080px;
  margin-inline: auto;
  padding: var(--space-4);
}

/* --- typography ------------------------------------------------------------ */

h1,
h2,
h3 {
  line-height: var(--lh-tight);
  color: var(--color-text);
}

h1 {
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  margin: var(--space-4) 0 var(--space-2);
}

h2 {
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  margin: var(--space-4) 0 var(--space-2);
}

h3 {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  margin: var(--space-3) 0 var(--space-2);
}

p {
  margin: 0 0 var(--space-3);
  color: var(--color-text-secondary);
}

/* --- links ------------------------------------------------------------------- */

a {
  color: var(--color-primary);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* --- focus (always visible) --------------------------------------------------- */

:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* --- buttons ------------------------------------------------------------------- */

.btn,
button[type="submit"] {
  display: inline-block;
  padding: var(--space-2) var(--space-3);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  text-align: center;
}

/* Bare submit buttons (login / upload / app home) are primary by default; */
/* action links opt into size parity via .btn.                             */
.btn-primary,
button[type="submit"]:not(.btn-ghost) {
  background: var(--color-primary);
  color: var(--color-on-primary);
}

.btn-primary:hover,
button[type="submit"]:not(.btn-ghost):hover {
  background: var(--color-primary-hover);
  text-decoration: none;
}

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

.btn-ghost:hover {
  background: var(--color-surface-elevated);
  text-decoration: none;
}

.btn-block {
  width: 100%;
}

/* --- cards / surfaces ----------------------------------------------------------- */

.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
}

.auth-card {
  max-width: 420px;
  margin: var(--space-5) auto;
}

/* --- landing hero ------------------------------------------------------------------ */

.hero {
  max-width: 560px;
  margin: var(--space-5) auto;
  text-align: center;
}

/* --- forms ------------------------------------------------------------------------ */

label {
  display: block;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-1);
}

input,
select {
  display: block;
  width: 100%;
  padding: var(--space-2);
  font: inherit;
  color: var(--color-text);
  background: var(--color-surface-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-2);
}

input:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 0;
  border-color: var(--color-primary);
}

.errorlist {
  list-style: none;
  margin: 0 0 var(--space-2);
  padding: 0;
  font-size: var(--text-sm);
  color: var(--color-danger);
}

/* --- messages (Django message tags) -------------------------------------------------- */

.messages {
  list-style: none;
  margin: 0 0 var(--space-3);
  padding: 0;
}

.messages li {
  padding: var(--space-2) var(--space-3);
  margin-bottom: var(--space-2);
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  font-size: var(--text-sm);
}

.messages .success {
  color: var(--color-success);
  background: color-mix(in srgb, var(--color-success) 12%, transparent);
  border-color: color-mix(in srgb, var(--color-success) 35%, transparent);
}

.messages .warning {
  color: var(--color-warning);
  background: color-mix(in srgb, var(--color-warning) 12%, transparent);
  border-color: color-mix(in srgb, var(--color-warning) 35%, transparent);
}

.messages .error,
.messages .danger {
  color: var(--color-danger);
  background: color-mix(in srgb, var(--color-danger) 12%, transparent);
  border-color: color-mix(in srgb, var(--color-danger) 35%, transparent);
}

.messages .info,
.messages .debug {
  color: var(--color-text-secondary);
  background: var(--color-surface-elevated);
  border-color: var(--color-border);
}