/* ==========================================================================
   KM Apps & Games — Design tokens layer
   Self-hosted fonts, CSS custom properties, reset, base typography.
   See docs/superpowers/research/2026-08-17-design-system.md for rationale
   and contrast verification.
   ========================================================================== */

/* --- Self-hosted webfonts (no CDN <link>, no runtime network requests) --- */

@font-face {
  font-family: "Fredoka";
  src: url("../fonts/fredoka-v17-latin-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Fredoka";
  src: url("../fonts/fredoka-v17-latin-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Nunito";
  src: url("../fonts/nunito-v32-latin-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Nunito";
  src: url("../fonts/nunito-v32-latin-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* --- Design tokens --- */

:root {
  /* Pink scale — "K" (playful / cartoony).
     pink-500 is the brand swatch/gradient stop only (3.4–3.5:1 on paper —
     decorative & large-text/UI use, NOT body text or small button labels).
     pink-600 is safe as a filled UI background under white label text
     (4.6:1) but NOT as text sitting directly on --paper (4.47:1, just
     under AA). pink-700/900 are safe for text-on-paper at any size.
     See design-system.md for the full measured table. */
  --pink-50: #fff0f7;
  --pink-100: #ffd9ec;
  --pink-300: #ff8fc7;
  --pink-500: #ec4899; /* brand pink */
  --pink-600: #db2777;
  --pink-700: #be185d; /* text-safe pink */
  --pink-900: #831843;

  /* Blue scale — "M" (rugged / chunky). Cyan-shifted 2026-08-17 to match the
     chosen logo (variant a2): anchor blue-500 #00b4d8 (bright aqua-cyan),
     blue-700 #0077b6 (deep teal-cyan). Unlike the original indigo-leaning
     scale, blue-500 and blue-600 are NOT text-safe at any size (2.40:1 and
     3.39:1 on paper) — treat them as decorative/gradient-only or reserve
     blue-600 for large/bold text and non-text UI (3.39:1 clears the 3:1
     large-text/UI threshold). blue-700 is now the flexible step: 4.73:1
     text-on-paper and 4.87:1 white-on-fill, both just-clears-AA — the
     margin is tighter than the old blue-500 (5.0:1/5.2:1), so treat 700 as
     the floor, not a step with headroom. blue-900 keeps a large safety
     margin (10.4:1) for strong emphasis. See design-system.md for the full
     measured table and the recomputed values. */
  --blue-50: #e6fbff;
  --blue-100: #c7f3fb;
  --blue-300: #3fc9e6; /* decorative/non-text accent, not contrast-tested for text use */
  --blue-500: #00b4d8; /* brand cyan — decorative/gradient-only, fails AA at any size on paper */
  --blue-600: #0096b4; /* fill-only; safe for large/bold white text (3.49:1), NOT small labels */
  --blue-700: #0077b6; /* text-safe pink-700 equivalent — the new flexible/floor step */
  --blue-900: #04435e; /* strong emphasis, largest safety margin */

  /* Neutrals */
  --ink: #1b1626; /* body/heading text — 17.2:1 on --paper */
  --paper: #fffbf8; /* warm off-white page background */

  /* Brand gradient — pink (K) to blue (M), diagonal */
  --grad-brand: linear-gradient(135deg, var(--pink-500), var(--blue-500));

  /* Shape & elevation */
  --radius-card: 20px;
  --shadow-card: 0 4px 14px rgba(27, 22, 38, 0.12), 0 1px 3px rgba(27, 22, 38, 0.08);

  /* Type */
  --font-display: "Fredoka", ui-rounded, "Segoe UI", sans-serif;
  --font-body: "Nunito", "Segoe UI", system-ui, sans-serif;

  /* Spacing scale (4/8pt rhythm) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
}

/* --- Reset --- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

img,
picture,
svg,
video {
  display: block;
  max-width: 100%;
}

/* --- Base typography --- */

body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background-color: var(--paper);
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.2;
}

/* ==========================================================================
   KM Apps & Games — Component layer (Task 5)
   Layout, header/hero/portfolio/about/footer styling, motion, focus states.
   ========================================================================== */

/* --- Layout helper --- */

.wrap {
  width: 100%;
  max-width: 1100px;
  margin-inline: auto;
  padding-inline: var(--space-5);
}

/* --- Links & focus states --- */

a {
  color: inherit;
  text-decoration: none;
}

a:focus-visible,
button:focus-visible {
  outline: 3px solid var(--blue-900);
  outline-offset: 3px;
  border-radius: 4px;
}

/* --- Header --- */

.site-header {
  padding-block: var(--space-4);
}

.site-header__inner {
  display: flex;
}

.brand {
  display: inline-flex;
  align-items: center;
}

/* Full lockup image (798x592) carries the "KM Apps & Games" wordmark
   baked in — no separate HTML text wordmark alongside it. Rendered
   height only; width is intrinsic/auto so the 798:592 aspect ratio
   (~1.348) is preserved and the explicit width/height attributes on
   the <img> still prevent layout shift. */
.brand__mark {
  height: 60px;
  width: auto;
}

@media (min-width: 640px) {
  .brand__mark {
    height: 84px;
  }
}

/* --- Hero ---
   Brand gradient fill with a slow ambient drift, driven by transform
   (translate) on an oversized ::before layer rather than background-position
   — transform is compositor-only, so the drift never triggers a repaint.
   Text sits in --ink rather than white: ink measures a high-margin pass
   against both gradient stops (pink-500 and blue-500), where white text
   would fail AA over the blue-500 half of the gradient (2.46:1, below even
   the 3:1 large-text floor) — see
   docs/superpowers/research/2026-08-17-design-system.md. */

.hero {
  position: relative;
  overflow: hidden;
  padding-block: var(--space-8);
}

.hero::before {
  content: "";
  position: absolute;
  inset: -25%;
  background: var(--grad-brand);
  animation: hero-drift 18s ease-in-out infinite alternate;
  pointer-events: none;
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle 130px at 70px 50px, var(--pink-100) 99%, transparent 100%),
    radial-gradient(circle 160px at calc(100% - 240px) calc(100% - 280px), var(--blue-100) 99%, transparent 100%);
  filter: blur(40px);
  opacity: 0.35;
  pointer-events: none;
}

@keyframes hero-drift {
  0% {
    transform: translate(-8%, -6%);
  }
  100% {
    transform: translate(8%, 6%);
  }
}

.hero__inner {
  position: relative;
  max-width: 640px;
  text-align: center;
  margin-inline: auto;
}

.hero__title {
  color: var(--ink);
  font-size: clamp(2.25rem, 1.4rem + 3.5vw, 3.75rem);
  font-weight: 700;
}

.hero__sub {
  margin-top: var(--space-4);
  color: var(--ink);
  font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);
  font-weight: 600;
}

/* --- Portfolio --- */

.portfolio {
  padding-block: var(--space-8);
}

.portfolio__heading {
  font-size: clamp(1.5rem, 1.3rem + 0.8vw, 2rem);
  color: var(--ink);
  text-align: center;
  margin-bottom: var(--space-6);
  position: relative;
}

.portfolio__heading::after {
  content: "";
  display: block;
  width: 64px;
  height: 5px;
  border-radius: 999px;
  background: var(--grad-brand);
  margin: var(--space-3) auto 0;
}

.tile-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

@media (min-width: 900px) {
  .tile-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.tile {
  position: relative;
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  background: var(--pink-50);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.tile:nth-child(2) {
  background: var(--blue-50);
}

.tile:hover,
.tile:focus-within {
  transform: translateY(-8px);
  box-shadow: 0 14px 28px rgba(27, 22, 38, 0.18), 0 4px 10px rgba(27, 22, 38, 0.1);
}

.tile__img {
  width: 100%;
  height: auto; /* without this, the height="" attribute wins and fixes tiles at 1000px */
  aspect-ratio: 9 / 16;
  object-fit: cover;
}

.tile__badge {
  position: absolute;
  top: var(--space-4);
  left: var(--space-4);
  z-index: 1;
  background: var(--pink-600);
  color: #fff;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.8125rem;
  padding: 6px 14px;
  border-radius: 999px;
  box-shadow: 0 2px 6px rgba(27, 22, 38, 0.2);
  transform: rotate(-4deg);
  transition: transform 0.25s ease;
}

.tile:hover .tile__badge,
.tile:focus-within .tile__badge {
  transform: rotate(0deg) translateY(-2px);
}

/* --- About --- */

.about {
  background: linear-gradient(135deg, var(--pink-50), var(--blue-50));
  padding-block: var(--space-8);
}

.about__inner {
  max-width: 640px;
  margin-inline: auto;
  text-align: center;
}

.about__text {
  font-size: 1.0625rem;
  color: var(--ink);
}

/* --- Footer --- */

.site-footer {
  padding-block: var(--space-6);
}

.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-size: 0.9375rem;
  color: var(--ink);
}

.site-footer__link {
  color: var(--blue-700);
  font-weight: 700;
}

.site-footer__link:hover {
  color: var(--pink-700);
  text-decoration: underline;
}

.site-footer__sep {
  color: var(--pink-300);
}

/* ==========================================================================
   KM Apps & Games — Prose page layer (Task 6)
   Shared layout for simple content pages (privacy policy, 404).
   ========================================================================== */

/* --- Prose (privacy policy) --- */

.prose-section {
  padding-block: var(--space-8);
}

.prose {
  max-width: 70ch;
  margin-inline: auto;
}

.prose__title {
  font-size: clamp(1.75rem, 1.5rem + 1vw, 2.25rem);
  color: var(--ink);
  margin-bottom: var(--space-3);
}

.prose__updated {
  color: var(--blue-700);
  font-weight: 700;
  margin-bottom: var(--space-6);
}

.prose h2 {
  font-size: 1.25rem;
  color: var(--ink);
  margin-top: var(--space-7);
  margin-bottom: var(--space-3);
}

.prose h2:first-of-type {
  margin-top: 0;
}

.prose p {
  margin-top: var(--space-3);
}

.prose a {
  color: var(--blue-700);
  font-weight: 700;
}

.prose a:hover {
  color: var(--pink-700);
  text-decoration: underline;
}

/* --- Not-found (404) --- */

.not-found {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  padding-block: var(--space-8);
  text-align: center;
}

.not-found__inner {
  max-width: 480px;
  margin-inline: auto;
}

.not-found__title {
  font-size: clamp(1.75rem, 1.5rem + 1vw, 2.5rem);
  color: var(--ink);
}

.not-found__text {
  margin-top: var(--space-4);
  color: var(--ink);
  font-size: 1.0625rem;
}

.not-found__link {
  display: inline-block;
  margin-top: var(--space-6);
  color: #fff;
  background: var(--blue-700);
  font-weight: 700;
  padding: 12px 28px;
  border-radius: 999px;
  box-shadow: var(--shadow-card);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.not-found__link:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 28px rgba(27, 22, 38, 0.18), 0 4px 10px rgba(27, 22, 38, 0.1);
}

/* --- Reduced motion --- */

@media (prefers-reduced-motion: reduce) {
  .hero::before {
    animation: none;
    transform: translate(0, 0);
  }

  .tile,
  .tile__badge,
  .not-found__link {
    transition: none;
  }
}