/* siddha.site. Every value comes from design/tokens.css (vendored from siddha-design). No literals here. */
* { margin: 0; padding: 0; box-sizing: border-box; }

html { scrollbar-gutter: stable; background: var(--color-bg-page); }

body {
  background: var(--color-bg-page);
  color: var(--color-text-primary);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  transition: background var(--motion-duration-appear) var(--motion-easing-standard), color var(--motion-duration-appear) var(--motion-easing-standard);
}

a { color: var(--color-link-default); text-decoration: underline; text-decoration-thickness: var(--size-hairline); text-underline-offset: 3px; text-decoration-color: color-mix(in oklab, var(--color-link-default) 45%, transparent); }
a:hover { text-decoration-color: var(--color-link-default); }
a:focus-visible { outline: 2px solid var(--color-accent-default); outline-offset: 3px; }

.label { font-family: var(--font-label); font-weight: var(--weight-semibold); font-size: var(--text-label); color: var(--color-text-muted); }
.meta  { font-family: var(--font-label); font-weight: var(--weight-semibold); font-size: var(--text-label); color: var(--color-text-faint); font-variant-numeric: tabular-nums; white-space: nowrap; }

.topbar { position: fixed; top: var(--space-5); right: var(--space-6); display: flex; align-items: center; gap: var(--space-4); }
.clock { font-variant-numeric: tabular-nums; }

/* theme toggle: a sharp track on a surface, an ink knob that springs to the active side */
.theme {
  position: relative; width: 56px; height: 32px; padding: 0; cursor: pointer; display: block;
  background: var(--color-bg-surface); border: var(--size-hairline) solid var(--color-border-edge); box-shadow: var(--shadow-card); border-radius: var(--radius-none);
  transition: background var(--motion-duration-appear) var(--motion-easing-standard);
}
.theme:focus-visible { outline: 2px solid var(--color-accent-default); outline-offset: 3px; }
.theme-knob {
  position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; background: var(--color-text-primary);
  transition: transform var(--motion-duration-move) var(--motion-easing-spring), background var(--motion-duration-appear) var(--motion-easing-standard);
}
.theme[data-mode="dark"] .theme-knob { transform: translateX(24px); }
.theme-icon { position: absolute; top: 3px; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; color: var(--color-text-muted); transition: color var(--motion-duration-appear) var(--motion-easing-standard); }
.theme-icon.sun { left: 3px; }
.theme-icon.moon { right: 3px; }
.theme-icon svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: butt; stroke-linejoin: miter; }
.theme[data-mode="light"] .sun, .theme[data-mode="dark"] .moon { color: var(--color-bg-page); }

.page { max-width: var(--size-measure); margin: 0 auto; padding: 22vh var(--space-6) 20vh; }

.intro h1 { font-family: var(--font-heading); font-size: var(--text-h1); font-weight: var(--weight-medium); letter-spacing: -0.01em; line-height: var(--leading-tight); }
.intro .sub { font-family: var(--font-heading); font-size: var(--text-lead); line-height: var(--leading-snug); color: var(--color-text-muted); margin-top: var(--space-3); }
.actions { display: flex; gap: var(--space-3); align-items: center; margin-top: var(--space-6); flex-wrap: wrap; }

.btn {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-ui); font-weight: var(--weight-semibold); font-size: var(--text-small); line-height: var(--leading-snug);
  padding: 10px var(--space-4); border-radius: var(--radius-none); border: var(--size-hairline) solid transparent;
  background: var(--color-accent-default); color: var(--color-text-on-accent); text-decoration: none;
  transition: background var(--motion-duration-appear) var(--motion-easing-standard), transform var(--motion-duration-move) var(--motion-easing-spring);
}
.btn:hover { background: var(--color-accent-hover); }
.btn:active { transform: scale(0.97); }
.btn.quiet { background: transparent; color: var(--color-text-primary); border-color: var(--color-border-hairline); }
.btn.quiet:hover { background: var(--color-bg-tint); }

.bio { margin-top: var(--space-12); }
.bio p + p { margin-top: 1em; }

.work { margin-top: var(--space-16); }
.label-row { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: var(--space-4); }

.cards { display: grid; grid-template-columns: 1fr; gap: var(--card-stack); }
.card {
  background: var(--color-bg-surface); border-radius: var(--radius-none);
  padding: var(--card-padding); display: flex; flex-direction: column; gap: var(--card-gap);
  color: inherit; text-decoration: none;
}
a.card { cursor: pointer; }
.card h2 { font-family: var(--font-heading); font-size: var(--card-title-size); font-weight: var(--card-title-weight); line-height: var(--leading-tight); transition: color var(--motion-duration-appear) var(--motion-easing-standard); }
a.card:hover h2 { color: var(--color-link-default); }
.card p { font-size: var(--card-summary-size); line-height: 1.5; color: var(--color-text-muted); }
.card-foot { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-4); border-top: var(--size-hairline) solid var(--color-border-hairline); padding-top: var(--card-gap); }

.opportunities { margin-top: var(--space-16); }

.links { margin-top: var(--space-16); display: flex; gap: var(--space-6); align-items: center; }
.links a { font-family: var(--font-ui); font-weight: var(--weight-semibold); font-size: var(--text-small); text-decoration: none; }
.links a:hover { text-decoration: underline; }

.back { display: inline-block; margin-bottom: var(--space-4); }

@media (max-width: 640px) {
  .page { padding-top: 16vh; }
  .topbar { top: var(--space-4); right: var(--space-4); gap: var(--space-3); }
  .links { flex-wrap: wrap; gap: var(--space-4); }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}