/* Zelo — design-system tokens and component classes. This file is the source of truth for the system's look; retune it here and see readme.md. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  --color-bg: #f3f7fc;
  --color-surface: #ffffff;
  --color-text: #101d2e;
  --color-accent: #3163e0;   /* primary — trust, action */
  --color-accent-2: #0fac98; /* secondary — confirmation, momentum */
  --color-divider: color-mix(in srgb, #101d2e 12%, transparent);

  /* Tonal ramps — generated in OKLCH on one shared lightness scale, so the
     same step of any role matches the others in visual value. 100 is the
     lightest step, 900 the darkest, on this light ground. */
  --color-neutral-100: #ffffff;
  --color-neutral-200: #f3f7fc;
  --color-neutral-300: #e5ebf4;
  --color-neutral-400: #d0d9e8;
  --color-neutral-500: #a8b3c7;
  --color-neutral-600: #7c879c;
  --color-neutral-700: #566075;
  --color-neutral-800: #333c52;
  --color-neutral-900: #131a2c;

  --color-accent-100: #eaf0fe;
  --color-accent-200: #cddafc;
  --color-accent-300: #a3bdf8;
  --color-accent-400: #6f95f1;
  --color-accent-500: #3163e0;
  --color-accent-600: #234ebc;
  --color-accent-700: #1a3c92;
  --color-accent-800: #142d6d;
  --color-accent-900: #0d1d47;

  --color-accent-2-100: #e1faf5;
  --color-accent-2-200: #b7f0e5;
  --color-accent-2-300: #7fe0cf;
  --color-accent-2-400: #3fc7b0;
  --color-accent-2-500: #0fac98;
  --color-accent-2-600: #0b8a7a;
  --color-accent-2-700: #0a6d61;
  --color-accent-2-800: #0a544c;
  --color-accent-2-900: #073834;

  /* Section band — a saturated deep-blue ground for the rare full-bleed
     moment (a stat band, a divider slide). Interface chrome never uses this. */
  --color-section: #0d1d47;
  --color-section-glow: #1a3c92;
  --color-section-ghost: #3163e0;

  --font-heading: "Inter", system-ui, sans-serif;
  --font-heading-weight: 700;
  --font-body: "Inter", system-ui, sans-serif;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;

  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;

  /* Elevation — soft ink-tinted shadows tuned to this light ground. */
  --shadow-sm: 0 1px 2px rgba(16,29,46,0.06), 0 0 0 1px rgba(16,29,46,0.05);
  --shadow-md: 0 8px 20px rgba(16,29,46,0.10), 0 0 0 1px rgba(16,29,46,0.06);
  --shadow-lg: 0 24px 48px rgba(16,29,46,0.16), 0 0 0 1px rgba(16,29,46,0.06);
}

body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
}
h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: var(--font-heading-weight); }

.lighten{mix-blend-mode:normal;background-color:transparent}

/* ══════════════════════════════════════════════════════════════════════════
   Components — built with the tokens above. Plain CSS
   on plain HTML: no JavaScript, no build step. Each class is documented in
   readme.md and demonstrated in foundations/ and components/.
   ══════════════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font-size: 16px; line-height: 1.55; font-weight: 400; }
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  line-height: 1.14; letter-spacing: -0.02em; margin: 0 0 var(--space-2);
}
h1 { font-size: 44px; }
h2 { font-size: 34px; }
h3 { font-size: 26px; }
h4 { font-size: 21px; }
h5 { font-size: 17px; }
h6 { font-size: 13px; }
h6 { letter-spacing: 0.08em; text-transform: uppercase; }
p { margin: 0 0 var(--space-3); }
a { color: var(--color-accent-700); text-underline-offset: 3px; }
a:hover { color: var(--color-accent); }
img { display: block; max-width: 100%; }
figure { margin: 0; }
figcaption {
  font-size: 12px; margin-top: var(--space-1);
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}
.text-muted { color: color-mix(in srgb, var(--color-text) 55%, transparent); }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--color-accent) 25%, transparent); }

/* — rules — */
.hr { height: 1px; border: 0; margin: var(--space-4) 0; background: var(--color-divider); }

/* — buttons — */
/* Zelo signature: primary actions are a confident filled blue, never an
   outline — this is a system about reassurance, and a solid button reads
   as a commitment kept. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  cursor: pointer; text-decoration: none;
  font-family: var(--font-heading); font-weight: 600;
  font-size: 14px; line-height: 1.2; color: var(--color-text);
  background: transparent; border: 1px solid transparent;
  padding: calc(var(--space-2) * 1.1) var(--space-4);
  border-radius: var(--radius-md);
  transition: background 120ms ease, box-shadow 120ms ease, transform 120ms ease;
}
.btn svg { display: block; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-primary { background: var(--color-accent); color: #fff; box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--color-accent-600); }
.btn-primary:active { background: var(--color-accent-700); }
.btn-secondary { background: var(--color-neutral-200); color: var(--color-text); }
.btn-secondary:hover { background: var(--color-neutral-300); }
.btn-secondary:active { background: var(--color-neutral-400); }
.btn-ghost { color: var(--color-accent-700); padding-inline: var(--space-2); }
.btn-ghost:hover { background: color-mix(in srgb, var(--color-accent) 10%, transparent); }
.btn-ghost:active { background: color-mix(in srgb, var(--color-accent) 18%, transparent); }
.btn-icon { width: 40px; height: 40px; padding: 0; }
.btn-block { width: 100%; margin-top: var(--space-2); }

/* — forms — */
.field > label {
  display: block; font-size: 13px; font-weight: 500; margin-bottom: 6px;
  color: var(--color-text);
}
.input {
  width: 100%; min-height: 44px; padding: 8px 14px; font: inherit;
  font-size: 15px; color: var(--color-text); caret-color: var(--color-accent);
  background: var(--color-neutral-200);
  border: 1.5px solid transparent; border-radius: var(--radius-md);
  transition: border-color 120ms ease, background 120ms ease;
}
.input::placeholder { color: var(--color-neutral-600); }
.input:hover { background: var(--color-neutral-300); }
.input:focus-visible { background: var(--color-surface); border-color: var(--color-accent); outline-offset: 0; }
textarea.input { min-height: 96px; resize: vertical; }
.radio { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 14px; }
.radio input, .seg-opt input {
  position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none;
}
.radio .dot {
  width: 18px; height: 18px; flex: none; border-radius: 50%;
  border: 1.5px solid var(--color-neutral-500);
}
.radio:hover .dot { border-color: var(--color-accent); }
.radio input:checked + .dot {
  border-color: var(--color-accent); background: var(--color-accent);
  box-shadow: inset 0 0 0 4px var(--color-surface);
}
.radio input:focus-visible + .dot { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.seg {
  display: inline-flex; overflow: hidden;
  border: 1.5px solid var(--color-neutral-300); border-radius: var(--radius-md);
}
.seg-opt {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; font-size: 14px; cursor: pointer;
}
.seg-opt + .seg-opt { border-left: 1.5px solid var(--color-neutral-300); }
.seg-opt:has(input:checked) { color: #fff; background: var(--color-accent); }
.seg-opt:not(:has(input:checked)):hover { background: var(--color-neutral-200); }
.seg-opt:has(input:focus-visible) { outline: 2px solid var(--color-accent); outline-offset: -2px; }

/* — cards — */
.card {
  display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-4); border-radius: var(--radius-lg); background: var(--color-surface);
}
.card-kicker { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-accent-2-700); font-weight: 700; }
.card-title {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 19px; line-height: 1.2;
}
.card-body { margin: 0; font-size: 14px; opacity: 0.75; flex: 1; }
.card-meta {
  display: flex; align-items: center; gap: 6px; font-size: 12px;
  color: color-mix(in srgb, var(--color-text) 50%, transparent);
}
.elev-sm { box-shadow: var(--shadow-sm); }
.elev-md { box-shadow: var(--shadow-md); }
.elev-lg { box-shadow: var(--shadow-lg); }

/* — tags — */
.tag {
  display: inline-flex; align-items: center; font-size: 12px; font-weight: 600;
  letter-spacing: 0.01em; padding: 4px 12px;
  border-radius: 999px;
}
.tag-accent { background: var(--color-accent-100); color: var(--color-accent-700); }
.tag-accent-2 { background: var(--color-accent-2-100); color: var(--color-accent-2-700); }
.tag-neutral { background: var(--color-neutral-200); color: var(--color-neutral-700); }
.tag-outline { border: 1.5px solid var(--color-accent); color: var(--color-accent-700); }

/* — navigation — */
.nav {
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface); border-bottom: 1px solid var(--color-divider);
}
.nav-brand {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 18px; margin-right: auto;
}
.nav a { color: var(--color-text); text-decoration: none; font-size: 14px; font-weight: 500; }
.nav a:hover, .nav a[aria-current='page'] { color: var(--color-accent); }

/* — tables — */
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th {
  text-align: left; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
  padding: var(--space-2); border-bottom: 1.5px solid var(--color-neutral-300);
}
.table td {
  padding: var(--space-2);
  border-bottom: 1px solid var(--color-divider);
}
.table tbody tr:hover { background: var(--color-neutral-200); }

/* — dialog — */
.dialog-backdrop {
  position: fixed; inset: 0; display: grid; place-items: center;
  padding: var(--space-4);
  background: color-mix(in srgb, var(--color-neutral-900) 55%, transparent);
}
.dialog {
  width: min(440px, 100%); display: flex; flex-direction: column; gap: var(--space-3);
  padding: var(--space-6); border-radius: var(--radius-lg);
  background: var(--color-surface); box-shadow: var(--shadow-lg);
}
.dialog-title {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 21px;
}
.dialog-body { font-size: 14px; opacity: 0.75; }
.dialog-actions { display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-2); }