/* =====================================================================
   Got Stripes: deck.css
   "Command Deck 2" for the web. The shared base every page loads first:
   the self-hosted face, the tokens, the two buttons and the App Store
   badge wrapper. Mirrors the app's DESIGN.md and constants/theme.ts:
   one gold accent, a dark surface ladder, 1px hairlines, radius
   18 / 14 / full, condensed display type, tabular numerals.
   Page files (peryton.css, site.css, legal.css) compose these tokens.
   ===================================================================== */

/* One variable file covers every weight AND the width axis (wdth 62-125),
   so condensed display type and normal-width body share a single download. */
@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-wdth-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: dark;

  /* Gold: the one accent (Gold.* in the app) */
  --gold: #F5C518;
  --gold-bright: #FFD84D;
  --gold-deep: #C8960A;
  --gold-on: #0B1422;
  --gold-panel-top: #FFD43A;
  --gold-panel-bottom: #EDB20D;

  /* Surface ladder, darkest to lightest (Surface.* in the app) */
  --floor: #04090F;
  --card: #07111E;
  --raised: #0C1A2C;
  --chip: #122238;

  /* Hairlines (Hairline.* in the app) */
  --hair-faint: rgba(255, 255, 255, 0.05);
  --hair-soft: rgba(255, 255, 255, 0.09);
  --hair-strong: rgba(255, 255, 255, 0.16);
  --hair-hover: rgba(255, 255, 255, 0.26);
  --hair-gold: rgba(245, 197, 24, 0.28);
  --hair-gold-strong: rgba(245, 197, 24, 0.55);

  /* Ink on the dark floor, strongest to weakest.
     Contrast on --card: 17.5 / 12.3 / 7.4 / 5.4 : 1 (all AA for body text). */
  --ink-1: #F4F6FA;
  --ink-2: #C9D1DC;
  --ink-3: #98A3B3;
  --ink-4: #7D899B;

  /* Feedback (Feedback.* in the app); text tints keep AA on dark surfaces */
  --ok: #38E834;
  --ok-soft: rgba(56, 232, 52, 0.12);
  --ok-line: rgba(56, 232, 52, 0.6);
  --bad: #F02818;
  --bad-text: #FF6B61;
  --bad-soft: rgba(240, 40, 24, 0.12);
  --bad-line: rgba(240, 40, 24, 0.65);

  /* Shape: cards 18, inner panels and buttons 14, icon tiles 12, pills full.
     Device screen captures keep a device-like corner (documented exception). */
  --r-card: 18px;
  --r-panel: 14px;
  --r-btn: 14px;
  --r-tile: 12px;
  --r-pill: 999px;
  --r-screen: 26px;

  /* Depth: the milled top bevel and one soft drop, tinted to the floor */
  --bevel: inset 0 1px 0 rgba(255, 255, 255, 0.07);
  --drop: 0 1px 0 rgba(1, 4, 9, 0.45), 0 22px 44px -22px rgba(1, 4, 9, 0.9);
  --card-light: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0) 38%);

  /* Type. Display = Archivo condensed (echoes Avenir Next Condensed in the
     app); body = Archivo at normal width; numerals get tabular figures. */
  --sans: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --display: "Archivo", "Avenir Next Condensed", "Arial Narrow", system-ui, sans-serif;
  --cond: 80%;      /* titles, buttons, labels */
  --cond-x: 75%;    /* giant words and the hero */

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Visible focus everywhere. The ring follows each element's own radius. */
:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 3px; }

/* ---------------------------------------------------------------------
   Primary: the gold bezel (GoldButton). One style site-wide.
   Rim = bright-to-deep gradient on the border box; panel = gold gradient
   on the padding box; a sheen on the upper half; inset top highlight;
   warm soft shadow underneath.
   --------------------------------------------------------------------- */
.btn-gold, .btn-app {
  --btn-h: 54px;
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: var(--btn-h); padding: 0 24px;
  border: 1.5px solid transparent; border-radius: var(--r-btn);
  background:
    linear-gradient(180deg, var(--gold-panel-top), var(--gold-panel-bottom)) padding-box,
    linear-gradient(180deg, var(--gold-bright), var(--gold-deep)) border-box;
  color: var(--gold-on);
  font-family: var(--display); font-stretch: var(--cond); font-weight: 800;
  font-size: 1.0625rem; line-height: 1; letter-spacing: 0.05em; text-transform: uppercase;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    inset 0 -1px 0 rgba(122, 82, 0, 0.28),
    0 1px 1px rgba(1, 4, 9, 0.5),
    0 12px 26px -12px rgba(185, 135, 0, 0.55);
  transition: transform 0.16s var(--ease), box-shadow 0.16s var(--ease), filter 0.16s ease;
  -webkit-tap-highlight-color: transparent;
}
.btn-gold::before, .btn-app::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 52%);
}
.btn-gold:hover, .btn-app:hover {
  filter: brightness(1.04) saturate(1.05);
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.65),
    inset 0 -1px 0 rgba(122, 82, 0, 0.28),
    0 1px 1px rgba(1, 4, 9, 0.5),
    0 16px 30px -12px rgba(185, 135, 0, 0.6);
}
.btn-gold:active, .btn-app:active {
  transform: translateY(1px) scale(0.98);
  filter: brightness(0.98);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    inset 0 -1px 0 rgba(122, 82, 0, 0.2),
    0 4px 10px -6px rgba(185, 135, 0, 0.6);
}
.btn-gold:focus-visible, .btn-app:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 4px; }
.btn-gold:disabled, .btn-gold[aria-disabled="true"] {
  opacity: 0.45; cursor: not-allowed; transform: none; filter: saturate(0.7);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

/* Two-line label variant (404 page: "Go to / Home") */
.btn-app > span { display: grid; gap: 3px; text-align: left; }
.btn-app small { display: block; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.14em; opacity: 0.72; }
.btn-app strong { display: block; font-size: 1.0625rem; font-weight: 800; }

/* ---------------------------------------------------------------------
   Secondary: the ghost (GhostButton). Raised surface + strong hairline.
   --------------------------------------------------------------------- */
.btn-outline, .btn-ghost {
  --btn-h: 54px;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: var(--btn-h); padding: 0 22px;
  border: 1px solid var(--hair-strong); border-radius: var(--r-btn);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0)), var(--raised);
  color: var(--ink-1);
  font-family: var(--display); font-stretch: var(--cond); font-weight: 700;
  font-size: 1rem; line-height: 1; letter-spacing: 0.05em; text-transform: uppercase;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  box-shadow: var(--bevel), 0 1px 1px rgba(1, 4, 9, 0.5);
  transition: transform 0.16s var(--ease), border-color 0.2s ease, background-color 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}
.btn-outline:hover, .btn-ghost:hover { border-color: var(--hair-hover); background-color: var(--chip); }
.btn-outline:active, .btn-ghost:active { transform: translateY(1px) scale(0.98); }

/* App Store badge: official artwork, never recoloured or filtered */
.badge { display: inline-block; line-height: 0; border-radius: 10px; transition: transform 0.16s var(--ease); }
.badge:hover { transform: translateY(-1px); }
.badge:active { transform: translateY(1px) scale(0.98); }
.badge img { height: 50px; width: auto; }
.badge.lg img { height: 60px; }

@media (prefers-reduced-motion: reduce) {
  .btn-gold, .btn-app, .btn-outline, .btn-ghost, .badge { transition: none; }
  .btn-gold:hover, .btn-app:hover, .badge:hover { transform: none; }
}