/* ==========================================================================
   Design tokens
   Derived from the official Leverage Pad site (levergepad.org):
   Funnel Display, cream + forest tiles, mint accents, square grid cells,
   bracket crop-mark corners and the green to peach layer gradient.
   ========================================================================== */

@font-face {
  font-family: "Funnel Display";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("../assets/fonts/funnel-display-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}

:root {
  /* Type */
  --font-sans: "Funnel Display", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Neutrals (light side) */
  --ink: #111827;
  --ink-2: #1c1c1e;
  --text: #111827;
  --text-muted: #4b5563;
  --text-soft: #6b7280;
  --paper: #ffffff;
  --cream: #f4f1ea;
  --cream-2: #ebe6da;
  --line: rgba(17, 24, 39, 0.1);

  /* Forest + night (dark side) */
  --forest: #09281e;
  --forest-deep: #031f17;
  --forest-panel: #012b22;
  --night: #000000;
  --night-2: #07090b;
  --panel: #0b0f0e;
  --panel-line: rgba(255, 255, 255, 0.08);
  --on-dark: #f4f1ea;
  --on-dark-muted: rgba(244, 241, 234, 0.62);

  /* Accents */
  --mint: #30dcaf;
  --mint-bright: #00e5c0;
  --green: #059669;
  --amber: #d97706;
  --grad-text: linear-gradient(90deg, #059669 0%, #d97706 100%);
  --grad-strip: linear-gradient(90deg, #09281e 0%, #114d3c 5%, #219979 16%, #2cc9a0 24%,
      #30dcaf 28%, #3edaa0 35%, #63d579 47%, #82d259 56%, #fbcd8f 80%, #f6c2eb 100%);

  /* Crate cells (from the site's square grid) */
  --cell-0: #0b231a;
  --cell-1: #0d2f22;
  --cell-2: #134d3a;
  --cell-3: #1a5c42;
  --cell-4: #219979;
  --cell-5: #30dcaf;
  --cell-sold: #fbcd8f;

  /* Holder Crate tier metals */
  --t-copper: #c07a4f;
  --t-bronze: #a88146;
  --t-silver: #b4bec2;
  --t-gold: #d9ae47;
  --t-platinum: #d4ece4;

  /* Shape */
  --r-pill: 9999px;
  --r-cell: 2px;
  --r-tile: 4px;

  /* Layout */
  --container: 1240px;
  --gutter: clamp(16px, 4vw, 40px);
  --header-h: 72px;
  --section-y: clamp(80px, 11vw, 148px);

  /* Motion (matches the site's easing) */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --dur: 0.7s;
}

@media (max-width: 900px) {
  :root { --header-h: 64px; }
}