/* ============================================================
   TIZMEK — /contact (digital business card).
   Fonts and brand tokens come from tokens.css, loaded first.
   The hero stays terracotta in both themes — it is the brand block;
   everything below it follows the light/dark surface tokens.
   ============================================================ */

html[data-theme="light"] {
  --c-surface: #FFFCF4;
  --c-surface-line: #EFE7D6;
  --c-ink: #3F2A1B;
  --c-mono: #93826E;
  --c-cta-bg: var(--terra);
  --c-cta-fg: var(--warm-paper);
  --c-cta-shadow: 0 12px 24px -12px rgba(194, 65, 12, .75);
  --c-tag-bg: rgba(194, 65, 12, .10);
  --c-tag-fg: #C2410C;
  --c-go: #C2410C;
  --c-card-shadow: 0 40px 80px -50px rgba(63, 42, 27, .55);
}

html[data-theme="dark"] {
  --c-surface: rgba(255, 237, 213, .05);
  --c-surface-line: rgba(255, 237, 213, .14);
  --c-ink: #FFEDD5;
  --c-mono: rgba(255, 237, 213, .52);
  --c-cta-bg: var(--terra);
  --c-cta-fg: var(--warm-paper);
  --c-cta-shadow: 0 12px 26px -12px rgba(194, 65, 12, .6);
  --c-tag-bg: rgba(245, 158, 11, .14);
  --c-tag-fg: #F59E0B;
  --c-go: #F59E0B;
  --c-card-shadow: 0 40px 80px -50px rgba(0, 0, 0, .8);
}

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

body {
  background: var(--bg);
  color: var(--c-ink);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  min-height: 100dvh;
  transition: background .45s ease, color .45s ease;
  overflow-x: hidden;
}
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background: radial-gradient(120% 80% at 50% -10%, var(--glow) 0%, transparent 60%);
  pointer-events: none;
  transition: background .45s ease;
  z-index: 0;
}

/* ---- Card shell ---- */
.card {
  position: relative;
  z-index: 1;
  max-width: 440px;
  margin: 0 auto;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  transition: background .45s ease;
}
@media (min-width: 560px) {
  .card {
    margin: 40px auto;
    min-height: auto;
    border-radius: 28px;
    overflow: hidden;
    box-shadow: var(--c-card-shadow);
    border: 1px solid var(--c-surface-line);
  }
}

/* ---- Hero (deep coffee in both themes, so the terracotta logo tile reads) ---- */
.hero {
  position: relative;
  overflow: hidden;
  background: var(--coffee);
  color: var(--warm-paper);
  padding: 34px 20px 26px;
}
.hero::before {
  content: '';
  position: absolute;
  right: -60px;
  top: -60px;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(245, 158, 11, .34) 0%, transparent 70%);
  pointer-events: none;
}
.hero-top {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.tile {
  width: 46px;
  height: 46px;
  flex: 0 0 auto;
  filter: drop-shadow(0 8px 18px rgba(194, 65, 12, .45));
}

.name {
  position: relative;
  margin: 22px 0 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 27px;
  letter-spacing: -.03em;
  line-height: 1.05;
  color: var(--warm-paper);
}

/* Company card (/contact/): the drawn wordmark stands in for a person's name.
   The hero is coffee in both themes, so the paper variant always applies. */
.wordmark {
  position: relative;
  margin: 22px 0 0;
  height: 30px;
  aspect-ratio: 606.41 / 135.52;
  background: url('../assets/img/tizmek-wordmark-paper.svg') no-repeat center / contain;
}

/* The tile links home to the company card on personal cards. */
.tile-link {
  display: block;
  flex: 0 0 auto;
  border-radius: 12px;
}
.tile-link:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }
.role {
  position: relative;
  margin: 7px 0 0;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .03em;
  opacity: .82;
}

/* ---- Controls (sit on the coffee hero in both themes) ---- */
.controls {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.seg {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border-radius: 999px;
  background: rgba(255, 237, 213, .12);
}
.seg button {
  appearance: none;
  border: 0;
  cursor: pointer;
  background: transparent;
  color: rgba(255, 237, 213, .82);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  padding: 5px 11px;
  min-width: 34px;
  border-radius: 999px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s ease, color .15s ease;
}
.seg button:hover { color: var(--warm-paper); }
.seg button:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.seg button[aria-pressed="true"] {
  background: #FBF8F1;
  color: var(--terra);
}
#themeSeg button { padding: 5px 8px; min-width: 0; }
.swatch {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  display: block;
  border: 1.5px solid currentColor;
}
.swatch.light { background: #FBF8F1; color: #C9A96B; }
.swatch.dark { background: #171009; color: #8A6B4A; }
#themeSeg button[aria-pressed="true"] .swatch {
  box-shadow: 0 0 0 2px var(--terra), 0 0 0 3.5px var(--amber);
  border-color: var(--warm-paper);
}

/* ---- Save contact ---- */
.cta-wrap { padding: 16px 16px 6px; }
.save {
  appearance: none;
  border: 0;
  cursor: pointer;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  background: var(--c-cta-bg);
  color: var(--c-cta-fg);
  border-radius: 15px;
  padding: 15px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15.5px;
  letter-spacing: -.01em;
  box-shadow: var(--c-cta-shadow);
  transition: transform .1s ease, opacity .2s ease, background .45s ease, color .45s ease;
}
.save:hover { opacity: .92; }
.save:active { transform: scale(.985); }
.save:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }
.save .arrow { font-size: 16px; line-height: 1; }

/* ---- Channels ---- */
.channels {
  padding: 10px 16px 40px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.kicker {
  margin: 0;
  padding: 2px 4px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 400;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--c-mono);
}
.row {
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  padding: 13px 16px;
  min-height: 58px;
  background: var(--c-surface);
  border: 1px solid var(--c-surface-line);
  border-radius: 15px;
  transition: border-color .2s ease, transform .1s ease, background .45s ease;
}
.row:hover { border-color: var(--terra); }
.row:active { transform: scale(.99); }
.row:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.tag {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--c-tag-bg);
  color: var(--c-tag-fg);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .02em;
}
.tag.accent {
  background: var(--terra);
  color: var(--warm-paper);
}
.text {
  flex: 1;
  min-width: 0;
}
.label {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -.01em;
  color: var(--c-ink);
}
.sub {
  display: block;
  margin-top: 1px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--c-mono);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.go {
  color: var(--c-go);
  font-size: 17px;
  line-height: 1;
}

/* ---- Entrance (visible is the base state; animate FROM hidden only under .preload) ---- */
.hero, .cta-wrap, .channels {
  opacity: 1;
  transform: none;
  transition: opacity .7s cubic-bezier(.2, .7, .2, 1), transform .7s cubic-bezier(.2, .7, .2, 1);
}
html.preload .hero,
html.preload .cta-wrap,
html.preload .channels {
  opacity: 0;
  transform: translateY(14px);
}
.cta-wrap { transition-delay: .08s; }
.channels { transition-delay: .14s; }

@media (prefers-reduced-motion: reduce) {
  .hero, .cta-wrap, .channels,
  body, body::before, .card, .row, .save, .seg button {
    transition: none !important;
    animation: none !important;
  }
  html.preload .hero,
  html.preload .cta-wrap,
  html.preload .channels {
    opacity: 1;
    transform: none;
  }
}

@media (max-width: 380px) {
  .hero { padding: 28px 16px 22px; }
  .name { font-size: 24px; }
  .controls { gap: 4px; }
  .seg button { padding: 5px 9px; min-width: 30px; }
}