/* Shared styles for dingly.at. Tokens mirror packages/ui/src/tokens.ts and jewels.ts (skill liquid-glass-design). */
:root {
  --canvas: #f4f5f7;
  --surface: #ffffff;
  --ink: #14171c;
  --ink-muted: #565e6a;
  --hairline: rgba(20, 23, 28, 0.1);
  --brand: #1d4ed8;
  --brand-pressed: #1e3a8a;
  --brand-tint: #e8efff;
  --on-brand: #ffffff;
  --cyan: #0e7490;
  --amber: #b45309;
  --coral: #c2410c;
  --violet: #6d28d9;
  --emerald: #047857;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --canvas: #0f1114;
    --surface: #181b20;
    --ink: #f1f3f6;
    --ink-muted: #a3abb7;
    --hairline: rgba(241, 243, 246, 0.12);
    --brand: #60a5fa;
    --brand-pressed: #93c5fd;
    --brand-tint: #172340;
    --on-brand: #0b1220;
    --cyan: #22d3ee;
    --amber: #fbbf24;
    --coral: #fb923c;
    --violet: #a78bfa;
    --emerald: #34d399;
  }
}
:root[data-theme="dark"] {
  --canvas: #0f1114;
  --surface: #181b20;
  --ink: #f1f3f6;
  --ink-muted: #a3abb7;
  --hairline: rgba(241, 243, 246, 0.12);
  --brand: #60a5fa;
  --brand-pressed: #93c5fd;
  --brand-tint: #172340;
  --on-brand: #0b1220;
  --cyan: #22d3ee;
  --amber: #fbbf24;
  --coral: #fb923c;
  --violet: #a78bfa;
  --emerald: #34d399;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Segoe UI", Roboto, sans-serif;
  font-size: 17px;
  line-height: 1.55;
  overflow-x: hidden;
}
a { color: var(--brand); }
a:focus-visible, .button:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; border-radius: 14px; }
.wrap { max-width: 1040px; margin: 0 auto; padding: 0 16px; }

/* Header */
.top { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 20px; }
.brand { display: inline-flex; align-items: center; gap: 12px; color: var(--ink); text-decoration: none; font-weight: 800; font-size: 28px; letter-spacing: -0.03em; }
.brand-mark { width: 48px; height: 48px; border-radius: 14px; background: #1d4ed8; display: grid; place-items: center; box-shadow: 0 6px 18px rgba(29, 78, 216, 0.35); }
.brand-mark svg { width: 36px; height: 36px; transform-origin: 62% 60%; transition: transform 0.2s ease; }
.brand:hover .brand-mark svg { transform: rotate(-14deg); }
.brand-mark .tempo { stroke-dasharray: 16; animation: tempo 2.8s ease-in-out infinite; }
@keyframes tempo { 0%, 70%, 100% { stroke-dashoffset: 0; } 80% { stroke-dashoffset: 16; } 90% { stroke-dashoffset: -16; } }
.top nav { display: flex; gap: 20px; font-weight: 600; font-size: 15px; }
.top nav a { text-decoration: none; }

/* Buttons */
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 0 22px; border-radius: 14px; font-weight: 600; font-size: 17px; text-decoration: none; background: var(--brand); color: var(--on-brand); transition: background-color 0.15s ease, transform 0.15s ease; }
.button:hover { background: var(--brand-pressed); }
.button:active { transform: scale(0.97); }
.button.quiet { background: var(--brand-tint); color: var(--brand); }

/* Footer */
.foot { margin-top: 72px; padding: 28px 0 40px; border-top: 1px solid var(--hairline); color: var(--ink-muted); font-size: 15px; }
.foot .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; }
.foot nav { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.foot a { text-decoration: none; font-weight: 600; }

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