/* Tuki Costa — base resets + shared canvas/glass utility classes.
   These utilities are the single source of truth mirrored by every component/card in this system. */
* { box-sizing: border-box; }
body {
  margin: 0;
  font: var(--text-body);
  color: var(--text-primary);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 {
  font-family: var(--font-display);
  letter-spacing: var(--tracking-display);
  margin: 0;
}
p { margin: 0; }

/* Canvas — soft cool glow, never a warm blob, never flat gray */
.sky-canvas {
  background-color: var(--canvas);
  background-image:
    radial-gradient(ellipse 70% 50% at 20% -8%, rgba(216,232,244,.7) 0%, transparent 60%),
    radial-gradient(ellipse 55% 45% at 85% 100%, rgba(200,222,232,.4) 0%, transparent 60%);
}

/* Liquid glass surfaces */
.glass, .glass-strong, .glass-chip { position: relative; }
.glass::before, .glass-strong::before, .glass-chip::before {
  content: '';
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(115deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 28%, rgba(255,255,255,0) 62%, rgba(255,255,255,.28) 100%);
  opacity: .55;
}
.glass {
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: var(--glass-border);
  box-shadow: var(--glass-shadow);
}
.glass-strong {
  background: var(--glass-strong-bg);
  -webkit-backdrop-filter: var(--glass-strong-blur); backdrop-filter: var(--glass-strong-blur);
  border: var(--glass-strong-border);
  box-shadow: var(--glass-strong-shadow);
}
.glass-chip {
  background: var(--glass-chip-bg);
  -webkit-backdrop-filter: var(--glass-chip-blur); backdrop-filter: var(--glass-chip-blur);
  border: var(--glass-chip-border);
  box-shadow: var(--glass-chip-shadow);
}
.glass-dark {
  background: var(--glass-dark-bg);
  -webkit-backdrop-filter: var(--glass-dark-blur); backdrop-filter: var(--glass-dark-blur);
  border: var(--glass-dark-border);
  box-shadow: var(--glass-dark-shadow);
  color: #fff;
}
.grad-ink-text {
  color: var(--marine);
  background-image: linear-gradient(100deg, var(--marine), var(--petrol-dark) 60%, var(--petrol));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.eyebrow {
  font: var(--text-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-muted);
}
.muted { color: var(--text-muted); }
a { color: var(--accent-primary); text-decoration: none; }
a:hover { color: var(--petrol-dark); text-decoration: underline; }
code, pre { font-family: var(--font-mono); font-size: 12px; }
pre {
  background: rgba(19,41,58,.05); border: 1px solid var(--border);
  border-radius: 12px; padding: 14px; overflow-x: auto; color: var(--ink);
}