/* Shio — landing page tokens (mirrors docs/design-tokens.md semantic names) */

@font-face {
  font-family: "Departure Mono";
  src: url("/public/fonts/DepartureMono-Regular.woff2") format("woff2"),
       url("/public/fonts/DepartureMono-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --ink-800: #0E0E10;
  --ink-700: #1C1C1E;
  --ink-100: #F2F2F4;
  --ink-400: #8E8E93;
  --ink-500: #636368;
  --salt-bone: #E8DCC4;
  --salt-bone-diluted: #F4EEDF;

  /* Semantic — light defaults */
  --chrome-background: var(--salt-bone-diluted);
  --chrome-surface: #FFFFFF;
  --text-primary: var(--ink-800);
  --text-secondary: var(--ink-500);
  --text-tertiary: var(--ink-400);

  --icon-bg: var(--ink-800);
  --icon-fg: var(--salt-bone-diluted);

  /* Button surface — bone/ink lockup, inverts per theme */
  --button-surface: var(--ink-800);
  --button-text: var(--salt-bone-diluted);

  /* Ambient (ocean/sky) glyph color — warm bone in dark, ink in light */
  --ambient-color: var(--ink-800);

  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 24px;
  --space-xxl: 32px;
  --space-xxxl: 48px;
  --space-layout: 64px;

  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-icon: 22.37%;

  --font-chrome: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", sans-serif;
  --font-wordmark: "Departure Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --font-kanji: "DotGothic16", "Hiragino Sans", sans-serif;

  --duration-fade: 200ms;
  --ease-standard: cubic-bezier(0.32, 0.72, 0.0, 1.0);
}

[data-theme="dark"],
:root[data-theme="dark"] {
  --chrome-background: var(--ink-800);
  --chrome-surface: var(--ink-700);
  --text-primary: var(--ink-100);
  --text-secondary: var(--ink-400);
  --text-tertiary: var(--ink-500);
  --icon-bg: var(--salt-bone-diluted);
  --icon-fg: var(--ink-800);
  --button-surface: var(--salt-bone-diluted);
  --button-text: var(--ink-800);
  --ambient-color: var(--salt-bone-diluted);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --chrome-background: var(--ink-800);
    --chrome-surface: var(--ink-700);
    --text-primary: var(--ink-100);
    --text-secondary: var(--ink-400);
    --text-tertiary: var(--ink-500);
    --icon-bg: var(--salt-bone-diluted);
    --icon-fg: var(--ink-800);
    --button-surface: var(--salt-bone-diluted);
    --button-text: var(--ink-800);
    --ambient-color: var(--salt-bone-diluted);
  }
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
body {
  font-family: var(--font-chrome);
  font-size: 15px;
  line-height: 20px;
  color: var(--text-primary);
  background: var(--chrome-background);
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  animation: fade-in var(--duration-fade) var(--ease-standard);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
@media (prefers-reduced-motion: reduce) {
  body { animation: none; }
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
}
a:hover { text-decoration-color: currentColor; }

/* ── Ambient ASCII layer ──────────────────────────────────────────── */

#ambient {
  position: fixed;
  inset: 0;
  margin: 0;
  padding: 0;
  font-family: var(--font-wordmark);
  font-size: 13px;
  line-height: 16px;
  letter-spacing: 0;
  color: var(--ambient-color);
  white-space: pre;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  z-index: 0;
  opacity: 0.12;
  transition: opacity 600ms var(--ease-standard), color 600ms var(--ease-standard);
}

/* Konami flash — brief inversion */
html.konami-flash {
  filter: invert(1) hue-rotate(180deg);
  transition: filter 120ms ease-out;
}

main, footer { position: relative; z-index: 1; }

main {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding:
    max(6vh, env(safe-area-inset-top, 0))
    var(--space-lg)
    max(8vh, env(safe-area-inset-bottom, 0));
  width: 100%;
}

/* Hero — single column, all content in the sky */
.hero-sky {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 560px;
  width: 100%;
}

.hero-icon {
  width: 80px;
  height: 80px;
  border-radius: var(--radius-icon);
  background: var(--icon-bg);
  color: var(--icon-fg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-md);
}
.hero-icon svg { width: 100%; height: 100%; display: block; }

.wordmark {
  font-family: var(--font-wordmark);
  font-size: 26px;
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--text-primary);
  margin-bottom: var(--space-xl);
  display: inline-flex;
  align-items: baseline;
  gap: 0.12em;
}
.wordmark .cursor {
  display: inline-block;
  width: 0.38em;
  height: 0.95em;
  background: currentColor;
  transform: translateY(0.08em);
  animation: blink 1.2s steps(2, end) infinite;
}
@keyframes blink {
  to { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .wordmark .cursor { animation: none; opacity: 0.6; }
}

.hero-sky h1 {
  font-family: var(--font-display);
  font-size: 26px;
  line-height: 32px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  margin-bottom: var(--space-md);
  text-wrap: balance;
}

.hero-sky .tagline {
  font-size: 15px;
  line-height: 22px;
  color: var(--text-secondary);
  max-width: 36ch;
  margin-bottom: var(--space-xl);
  text-wrap: balance;
}

.cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 20px;
  background: var(--button-surface);
  color: var(--button-text);
  border-radius: var(--radius-md);
  text-decoration: none;
  font-weight: 500;
  font-size: 15px;
  min-height: 44px;
  transition: opacity 150ms var(--ease-standard);
  margin-bottom: var(--space-xl);
}
.cta:hover { opacity: 0.88; text-decoration: none; }
.cta:focus-visible { outline: 2px solid var(--button-surface); outline-offset: 3px; }

.cta-note {
  font-family: var(--font-wordmark);
  font-size: 12px;
  line-height: 18px;
  letter-spacing: 0.01em;
  color: var(--text-tertiary);
}

/* Screenshot strip */
.shots {
  width: 100%;
  max-width: 1080px;
  display: flex;
  gap: var(--space-lg);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--space-lg);
  padding: 0 var(--space-lg) var(--space-sm);
  margin-inline: calc(-1 * var(--space-lg));
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.shots::-webkit-scrollbar { display: none; }
.shot {
  flex: 0 0 240px;
  aspect-ratio: 9 / 19.5;
  background: var(--chrome-surface);
  border-radius: var(--radius-lg);
  scroll-snap-align: center;
  scroll-snap-stop: always;
}
.shot.shot-ipad { flex-basis: 440px; aspect-ratio: 4 / 3; }

/* Footer — single row, mono, lowercase */
footer {
  padding:
    var(--space-md)
    max(var(--space-lg), env(safe-area-inset-right, 0))
    max(var(--space-md), env(safe-area-inset-bottom, 0))
    max(var(--space-lg), env(safe-area-inset-left, 0));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  color: var(--text-tertiary);
  font-family: var(--font-wordmark);
  font-size: 11px;
  letter-spacing: 0.02em;
  text-transform: lowercase;
  flex-wrap: nowrap;
  min-width: 0;
}
footer .footer-left,
footer .footer-right {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  min-width: 0;
}
footer .footer-left {
  flex: 0 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
footer .footer-right { flex: 0 0 auto; }
.only-md { display: none; }
footer .prompt { opacity: 0.55; }
footer .sep { opacity: 0.45; }
footer .kanji {
  font-family: var(--font-kanji);
  text-transform: none;
  font-size: 12px;
  opacity: 0.4;
}

.theme-toggle {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-tertiary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  min-height: 32px;
  padding: 0;
  border-radius: 9999px;
}
.theme-toggle:hover { color: var(--text-primary); }
.theme-toggle:focus-visible { outline: 2px solid var(--text-primary); outline-offset: 2px; }
.theme-toggle svg { width: 18px; height: 18px; }

/* ── Shortcuts overlay ────────────────────────────────────────────── */
.overlay {
  position: fixed;
  inset: 0;
  background: color-mix(in srgb, var(--chrome-background) 75%, transparent);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-lg);
  z-index: 10;
}
.overlay[hidden] { display: none; }
.overlay-card {
  background: var(--chrome-surface);
  border-radius: var(--radius-lg);
  padding: var(--space-lg) var(--space-lg) var(--space-md);
  max-width: 360px;
  width: 100%;
  font-family: var(--font-wordmark);
  font-size: 12px;
  color: var(--text-primary);
  box-shadow: 0 12px 32px rgba(0,0,0,0.18);
}
.overlay-head {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: 12px;
  color: var(--text-tertiary);
  margin-bottom: var(--space-lg);
  text-transform: lowercase;
  letter-spacing: 0.02em;
}
.overlay-head .prompt { opacity: 0.55; }
.overlay-close {
  margin-left: auto;
  background: none;
  border: 1px solid color-mix(in srgb, currentColor 25%, transparent);
  color: inherit;
  padding: 2px 8px;
  border-radius: 4px;
  font: inherit;
  cursor: pointer;
  text-transform: lowercase;
}
.overlay-close:hover { color: var(--text-primary); border-color: currentColor; }

.shortcuts-list {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px var(--space-lg);
  font-size: 13px;
}
.shortcuts-list dt {
  color: var(--text-primary);
  white-space: nowrap;
}
.shortcuts-list dd {
  color: var(--text-secondary);
  text-transform: lowercase;
}

/* ── Tail page ────────────────────────────────────────────────────── */
.tail {
  font-family: var(--font-wordmark);
  font-size: 13px;
  line-height: 18px;
  color: var(--text-secondary);
  padding: var(--space-layout) var(--space-lg);
  max-width: 880px;
  margin: 0 auto;
}
.tail h1 {
  font-family: var(--font-wordmark);
  font-size: 14px;
  font-weight: 400;
  color: var(--text-tertiary);
  margin-bottom: var(--space-xl);
  text-transform: lowercase;
  letter-spacing: 0.02em;
}
.tail-log {
  white-space: pre-wrap;
  word-break: break-word;
}
.tail-log .ts { color: var(--text-tertiary); }
.tail-log .lvl-info { color: var(--text-secondary); }
.tail-log .lvl-ok { color: var(--text-primary); }

@media (min-width: 600px) {
  main {
    padding: 10vh var(--space-xl) 8vh;
  }
  .hero-icon {
    width: 112px;
    height: 112px;
    margin-bottom: var(--space-lg);
  }
  .wordmark {
    font-size: 40px;
    margin-bottom: var(--space-xxxl);
  }
  .hero-sky h1 {
    font-size: 40px;
    line-height: 46px;
  }
  .hero-sky .tagline {
    font-size: 17px;
    line-height: 26px;
    margin-bottom: var(--space-xxl);
  }
  footer {
    font-size: 12px;
    padding: var(--space-lg);
  }
  .only-md { display: inline-flex; align-items: center; }
  .shot { flex-basis: 260px; }
  .shot.shot-ipad { flex-basis: 480px; }
}

@media (min-width: 960px) {
  .shots {
    justify-content: center;
    overflow-x: visible;
    margin-inline: 0;
    padding-inline: 0;
  }
}