/* ═══════════════════════════════════════════════════════════════════
 * Tranki — landing
 *
 * One document, two layouts. This sheet is what both share: fonts, tokens,
 * the nav, the CTA and the footer. `desktop.css` lays out the page from 900px
 * up (one card followed through two months) and `mobile.css` below it (the
 * app's real screens, fanned like a hand of cards). The two are loaded with
 * `media` attributes that never overlap, and each one reveals its own block
 * (`.only-desktop` / `.only-mobile`), so neither layout overrides the other.
 *
 * Card families and grade colours are the app's (`frontend/src/index.css`),
 * converted to hex because there is no build step here.
 *
 * Apex CSP: self-hosted fonts in `fonts/`, local images in `shots/`, nothing
 * external. See `docs/tranki/flows/redesign-brief.md`.
 * ═══════════════════════════════════════════════════════════════════ */

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("fonts/bricolage-grotesque-latin.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Instrument Sans";
  src: url("fonts/instrument-sans-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --ink: #020618;
  --muted: #5b6b85;
  --paper: #ffffff;
  --arena: #f6f4ee;
  --hairline: #dcd7ca;

  --indigo: #615fff;
  --amber: #ffb900;
  --amber-edge: #e17100;

  --display: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --body: "Instrument Sans", ui-sans-serif, system-ui, sans-serif;
  --ease: cubic-bezier(0.2, 0.8, 0.25, 1);
}

[data-hue="indigo"] { --hue: #615fff; --hue-edge: #432dd7; }
[data-hue="violet"] { --hue: #8e51ff; --hue-edge: #7008e7; }
[data-hue="teal"]   { --hue: #00bba7; --hue-edge: #00786f; }
[data-hue="rose"]   { --hue: #ff2056; --hue-edge: #c70036; }

/* The four grades, same colours as the app's rating bar. */
.g1 { --g: #ff2056; --g-edge: #c70036; --g-text: #fff; }
.g2 { --g: #ff6900; --g-edge: #ca3500; --g-text: #fff; }
.g3 { --g: #9ae600; --g-edge: #5ea500; --g-text: #1a2e05; }
.g4 { --g: #00bc7d; --g-edge: #007a55; --g-text: #fff; }

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

html {
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--body);
  color: var(--ink);
  background: var(--arena);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
}

ol,
ul {
  list-style: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

/* The mobile browser paints its own highlight over the element's box; every
 * control here gives its own press feedback. */
:where(a, button) {
  -webkit-tap-highlight-color: transparent;
}

:where(a, button):focus-visible {
  outline: 3px solid var(--indigo);
  outline-offset: 3px;
  border-radius: 0.6rem;
}

.skip-link {
  position: absolute;
  left: 0.75rem;
  top: -4rem;
  z-index: 200;
  padding: 0.6rem 1rem;
  border-radius: 0.6rem;
  background: var(--amber);
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
  transition: top 0.15s var(--ease);
}

.skip-link:focus {
  top: 0.75rem;
}

.only-desktop,
.only-mobile {
  display: none;
}

/* ─── Nav ─────────────────────────────────────────────────────────── */
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-inline: auto;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.3rem;
  letter-spacing: -0.03em;
}

.brand svg {
  width: 1.35rem;
  height: 1.75rem;
}

.login {
  padding: 0.55rem 1.1rem;
  border-radius: 999px;
  background: var(--paper);
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
}

/* ─── CTA: amber is kept for actions, nothing else uses it ────────── */
.cta {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 3.5rem;
  padding: 0 2.25rem;
  border-radius: 999px;
  background: var(--amber);
  color: var(--ink);
  font-weight: 700;
  font-size: 1.05rem;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 4px 0 var(--amber-edge);
  transition:
    transform 0.1s,
    box-shadow 0.1s;
}

.cta:active {
  transform: translateY(4px);
  box-shadow: 0 0 0 var(--amber-edge);
}

/* ─── Footer ──────────────────────────────────────────────────────── */
.footer {
  font-size: 0.9rem;
  color: var(--muted);
}

.footer__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  margin-inline: auto;
}

.footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
}

.footer__links a {
  font-weight: 600;
  text-decoration: none;
}

.footer__links a:hover {
  color: var(--ink);
}

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