/* styles/components.css */

.card {
  background: var(--surface-1);
  border: 1px solid var(--border-1);
  border-radius: var(--r-16);
  padding: var(--s-6) var(--s-5);
  box-shadow: var(--shadow-1);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
}

.label {
  color: var(--muted);
  font-size: var(--fs-14);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.clock {
  font-variant-numeric: tabular-nums;
  font-size: clamp(36px, 5vw, var(--fs-56));
  line-height: var(--lh-tight);
  margin: var(--s-3) 0 var(--s-2);
}

.meta {
  color: var(--muted);
  font-size: var(--fs-14);
}

.footer {
  margin-top: var(--s-4);
  color: var(--muted);
  font-size: var(--fs-13, 13px);
}

/* Optional: button primitive for future use */
.btn {
  appearance: none;
  border: 1px solid var(--border-1);
  background: var(--surface-1);
  color: var(--fg);
  padding: 10px 14px;
  border-radius: var(--r-12);
  cursor: pointer;
  backdrop-filter: blur(var(--glass-blur));
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-1); }
.btn:active { transform: translateY(0px); box-shadow: none; }
.btn:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; }