/* Ugiwise site prototype — base: tokens, type, keys, layout.
   Colours are the app's own (ugiwise/lib/design_system/tokens/colors.dart).
   The brand is a dark arcade cabinet, so the page is dark by design in every theme. */

@font-face { font-family: "Silkscreen"; src: url(../fonts/silkscreen-400.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Chakra Petch"; src: url(../fonts/chakrapetch-600.woff2) format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Chakra Petch"; src: url(../fonts/chakrapetch-700.woff2) format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Source Sans 3"; src: url(../fonts/sourcesans3-var.woff2) format("woff2"); font-weight: 200 900; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url(../fonts/jetbrainsmono-var.woff2) format("woff2"); font-weight: 100 800; font-display: swap; }

:root {
  color-scheme: dark;

  --base: #0a0f18;
  --nav: #08101a;
  --raised: #111825;
  --panel: #0f1524;
  --sunken: #0c121d;
  --plate: #1b2440;
  --plate-deep: #101728;
  --cart: linear-gradient(#1a2233, #121a29);
  --now: #122030;
  --socket: #0b1220;

  --line: #253148;
  --line-strong: #2e3a58;
  --line-code: #202a3c;
  --rule: #232b3c;
  --edge: #4f6ca8;
  --sel: #3d86a2;
  --ok-edge: #3f9169;
  --bad-edge: #b84a8f;
  --brass: #b98b22;
  --brass-deep: #6e4e10;
  --brass-pale: #ffe9a8;

  --tx: #f2efe8;
  --tx-bright: #fdfbf6;
  --tx-2: #c6ccd8;
  --tx-3: #9aa4ba;
  --tx-faint: #7183ad;

  --cyan: #4ee2ec;
  --cyan-bright: #6ceaf2;
  --cyan-deep: #2bc0d0;
  --mint: #5fd694;
  --gold: #f0c94a;
  --gold-bright: #ffe17a;
  --orange: #ff8a3c;
  --pink: #ef6fc0;
  --purple: #a78bf0;
  --bolt-red: #f2543d;
  --link: #6fd6e8;

  --amber: #ffb13d;
  --amber-deep: #e0851b;
  --amber-bevel: #8a4a08;
  --on-amber: #2a1403;

  --code: #e6ebf5;

  --f-arcade: "Silkscreen", ui-monospace, monospace;
  --f-ui: "Chakra Petch", system-ui, sans-serif;
  --f-read: "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, "SF Mono", Consolas, monospace;

  --gutter: 16px;
  --max: 1180px;
  --r: 14px;
  --ease: cubic-bezier(.2, .8, .2, 1);
}
@media (min-width: 720px) { :root { --gutter: 32px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 76px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--base);
  color: var(--tx);
  font: 400 1.0625rem/1.6 var(--f-read);
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--link); text-underline-offset: 3px; }
a:hover { color: var(--cyan-bright); }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; border-radius: 6px; }
button { font: inherit; color: inherit; }
code, kbd { font-family: var(--f-mono); }
p { margin: 0 0 1em; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.skip { position: absolute; left: 12px; top: -60px; z-index: 50; background: var(--amber); color: var(--on-amber);
  padding: 10px 14px; border-radius: 8px; font: 700 .95rem var(--f-ui); text-decoration: none; }
.skip:focus { top: 12px; }

.wrap { width: 100%; max-width: calc(var(--max) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }

/* ---------- type ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: .6em;
  font: 700 .82rem/1.4 var(--f-ui); letter-spacing: .14em; text-transform: uppercase;
  color: var(--cyan); margin: 0 0 12px;
}
.eyebrow::before { content: ""; width: 8px; height: 8px; background: currentColor; box-shadow: 0 0 10px currentColor; }
.eyebrow--pink { color: var(--pink); }
.eyebrow--gold { color: var(--gold); }

h1, h2, h3 { font-family: var(--f-ui); font-weight: 700; line-height: 1.08; margin: 0; color: var(--tx-bright); letter-spacing: -.01em; }
h2 { font-size: clamp(1.9rem, 4.2vw, 3rem); margin-bottom: 14px; }
h3 { font-size: 1.3rem; line-height: 1.2; }
.lede { font-size: clamp(1.06rem, 1.5vw, 1.2rem); color: var(--tx-2); max-width: 60ch; }

.ic { font-family: var(--f-mono); font-size: .88em; color: var(--cyan-bright); background: var(--now);
  border: 1px solid #24374d; border-radius: 5px; padding: .05em .35em; white-space: nowrap; }

/* ---------- keys (arcade buttons, same bevel as the app's lesson keys) ---------- */
.key {
  --face: linear-gradient(#ffc466, var(--amber) 40%, var(--amber-deep));
  --bevel: var(--amber-bevel);
  --ink: var(--on-amber);
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 22px;
  background: var(--face); color: var(--ink);
  border: 0; border-radius: 10px;
  box-shadow: 0 5px 0 var(--bevel), 0 10px 24px rgba(255, 160, 40, .18);
  font: 700 1.02rem/1 var(--f-ui); letter-spacing: .08em; text-transform: uppercase; text-decoration: none;
  cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent;
  transition: transform .12s var(--ease), box-shadow .12s var(--ease), filter .12s;
  position: relative; top: 0;
}
.key:hover { color: var(--ink); filter: brightness(1.06); }
.key:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--bevel), 0 4px 10px rgba(255, 160, 40, .12); }
.key--ghost {
  --face: #121722; --bevel: #191f2d; --ink: var(--tx);
  box-shadow: 0 5px 0 var(--bevel), inset 0 0 0 1px var(--edge);
}
.key--ghost:hover { color: var(--tx-bright); }
.key--ghost:active { box-shadow: 0 1px 0 var(--bevel), inset 0 0 0 1px var(--edge); }
.key--cyan { --face: linear-gradient(#8af0f6, var(--cyan) 45%, var(--cyan-deep)); --bevel: #10788a; --ink: #032128;
  box-shadow: 0 5px 0 var(--bevel), 0 10px 24px rgba(78, 226, 236, .16); }
.key--sm { min-height: 44px; padding: 0 16px; font-size: .9rem; border-radius: 8px; box-shadow: 0 4px 0 var(--bevel); }
.key--sm.key--ghost { box-shadow: 0 4px 0 var(--bevel), inset 0 0 0 1px var(--edge); }
.key--sm:active { transform: translateY(3px); }
.key[disabled] { opacity: .45; cursor: default; transform: none; }

/* ---------- header ---------- */
.top {
  position: sticky; top: 0; z-index: 40;
  background: rgba(8, 16, 26, .86);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(185, 139, 34, .45);
}
.top__in { display: flex; align-items: center; gap: 20px; height: 64px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; flex: none; }
.brand img { image-rendering: pixelated; }
.brand__head { width: 30px; height: auto; }
.brand__word { width: 122px; height: auto; }
.nav { display: flex; gap: 22px; margin-left: auto; }
.nav a { display: inline-flex; align-items: center; min-height: 44px; font: 700 .9rem/1 var(--f-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--tx-2); text-decoration: none; }
.nav a:hover, .nav a[aria-current="true"] { color: var(--cyan); }
.top__cta { flex: none; }
@media (max-width: 860px) {
  .nav { display: none; }
  .top__cta { margin-left: auto; }
}
@media (max-width: 400px) {
  .top__in { gap: 12px; }
  .brand__word { width: 100px; }
  .top__cta { padding: 0 12px; letter-spacing: .08em; }
}
@media (max-width: 350px) { .brand__head { display: none; } }

/* ---------- sections ---------- */
.sec { padding: clamp(48px, 6vw, 84px) 0; position: relative; }
.sec + .sec { border-top: 1px solid var(--line); }
.sec__head { max-width: 760px; margin-bottom: clamp(24px, 3vw, 36px); }

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