/* TimeKeep website — shared design system.
 * Loaded by every page so tokens, header, footer, buttons, the language
 * switch and common surfaces stay identical site-wide (light + dark). */

:root {
  color-scheme: light dark;
  --primary: #1E50D8; --primary-dark: #163A9E;
  --bg: #EAF0FB; --surface: #FFFFFF; --surface-2: #F3F7FD; --border: #DBE6F5;
  --text: #131C2B; --text-2: #566578;
  --success: #1E9E56; --warning: #C77A17;
  --radius: 16px; --radius-lg: 22px;
  --btn-fg: #fff;
  --shadow: 0 12px 32px rgba(20, 46, 120, .16);
  --shadow-lg: 0 18px 44px rgba(20, 46, 120, .20);
  --maxw: 1040px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --primary: #6FB0FF; --primary-dark: #DCEBFF;
    --bg: #0B1219; --surface: #131C26; --surface-2: #182430; --border: #26333F;
    --text: #E8EEF4; --text-2: #A2B0BE;
    --success: #4FD08A; --warning: #E7A94B;
    --btn-fg: #0B1219;
    --shadow: 0 12px 32px rgba(0, 0, 0, .40);
    --shadow-lg: 0 18px 44px rgba(0, 0, 0, .48);
  }
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background: var(--bg); color: var(--text); line-height: 1.6;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
a { color: var(--primary); }
/* Responsive-image reset: width/height attrs never lock the aspect ratio. */
img { max-width: 100%; height: auto; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }

/* ── Header ─────────────────────────────────────────── */
.site-header { padding: 16px 0; }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.brand { font-weight: 800; font-size: 19px; color: var(--primary-dark); text-decoration: none; white-space: nowrap; }
.head-right { display: flex; align-items: center; gap: 12px; }

/* ── Buttons ────────────────────────────────────────── */
.btn {
  display: inline-block; padding: 12px 22px; border-radius: 999px;
  font-weight: 700; text-decoration: none; font-size: 15px;
  cursor: pointer; border: 0; font-family: inherit; text-align: center;
  transition: filter .15s ease, transform .15s ease;
}
.btn:hover { filter: brightness(1.05); }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--primary); color: var(--btn-fg); }
.btn-outline { border: 2px solid var(--primary); color: var(--primary); background: transparent; }
.btn-sm { padding: 10px 18px; font-size: 14px; }
.btn-block { display: block; width: 100%; }

/* ── Language switch ────────────────────────────────── */
.lang-switch { display: inline-flex; gap: 2px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; padding: 3px; }
.lang-switch button { border: 0; background: transparent; font-weight: 700; font-size: 13px; color: var(--text-2); padding: 6px 14px; border-radius: 999px; cursor: pointer; font-family: inherit; transition: background .15s ease, color .15s ease; }
.lang-switch button:hover { color: var(--primary); }
.lang-switch button.is-active { background: var(--primary); color: var(--btn-fg); }

/* ── Surfaces ───────────────────────────────────────── */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; }
.panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow); }

/* ── Section headings ───────────────────────────────── */
h1, h2, h3 { line-height: 1.2; }
.section h2, h2.section-title { color: var(--primary-dark); font-size: 26px; margin-bottom: 8px; }
.section-sub { color: var(--text-2); font-size: 15px; margin-bottom: 22px; max-width: 44em; }

/* ── Footer ─────────────────────────────────────────── */
.site-footer { border-top: 1px solid var(--border); padding: 26px 0 44px; margin-top: 12px; font-size: 13px; color: var(--text-2); }
.site-footer .wrap { display: block; }
.site-footer a { color: var(--primary); text-decoration: none; margin-right: 16px; }
.site-footer .copy { margin-top: 10px; }