/* ==========================================================================
   Design tokens
   Pulled from the live froink.com product: white page, #111 ink,
   Froink orange with a chunky 3D shadow, doodle sticker colors,
   Comic Relief for display, IBM Plex Sans / Mono for everything else.
   ========================================================================== */

@font-face {
  font-family: "Comic Relief";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/comic-relief-400.woff2") format("woff2");
}
@font-face {
  font-family: "Comic Relief";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../assets/fonts/comic-relief-700.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("../assets/fonts/ibm-plex-sans-var.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/ibm-plex-mono-400.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../assets/fonts/ibm-plex-mono-500.woff2") format("woff2");
}

:root {
  /* ink + paper */
  --ink: #111111;
  --ink-2: #242424;
  --muted: #686868;
  --muted-2: #a3a3a3;
  --line: #e7e7e7;
  --paper: #ffffff;
  --cream: #fffbee;
  --night: #0c0c0c;

  /* froink orange (buttons) */
  --orange: #ff481f;
  --orange-edge: #c53005;
  --orange-shadow: #a92d0a;

  /* doodle stickers + annotations */
  --purple: #6355ea;
  --magenta: #dc368d;
  --green-ink: #3f8a2a;
  --pink: #ffc2e4;
  --pink-strong: #ff91cc;
  --lime: #c5f66f;
  --yellow: #fff176;
  --peach: #ff8555;
  --lavender: #e6e2ff;
  --notice-edge: #f0c24b;
  --notice-ink: #6f5200;

  /* crate materials (kraft paper crate) */
  --kraft: #f6e4bf;
  --kraft-light: #fbf1dc;
  --kraft-line: #e2c893;
  --kraft-inside: #ecd3a2;
  --kraft-deep: #d9b77a;

  /* default crate trim = froink orange, tiers override below */
  --tier-main: var(--orange);
  --tier-deep: var(--orange-shadow);
  --tier-soft: #ffd9cc;
  --tier-swatch: var(--orange); /* HTML-safe (tier-main may be an SVG url) */

  /* type */
  --font-display: "Comic Relief", "Comic Sans MS", "Comic Sans", cursive;
  --font-body: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* layout */
  --wrap: 1180px;
  --gutter: clamp(18px, 4vw, 40px);
  --header-h: 68px;
  --subnav-h: 46px;
  --radius-card: 20px;
  --shadow-card: 0 14px 35px rgba(17, 17, 17, 0.06);

  /* motion */
  --ease-bounce: cubic-bezier(0.3, 1.45, 0.5, 1);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---- Holder Crate tiers ------------------------------------------------ */
[data-tier="copper"] {
  --tier-main: #ec9a6c;
  --tier-deep: #a9502a;
  --tier-soft: #fbdcc9;
  --tier-swatch: #ec9a6c;
}
[data-tier="bronze"] {
  --tier-main: #c98a3e;
  --tier-deep: #7f5219;
  --tier-soft: #f0d7ae;
  --tier-swatch: #c98a3e;
}
[data-tier="silver"] {
  --tier-main: #c9ced8;
  --tier-deep: #6f7787;
  --tier-soft: #eef1f5;
  --tier-swatch: #c9ced8;
}
[data-tier="gold"] {
  --tier-main: #ffd84d;
  --tier-deep: #b98a00;
  --tier-soft: #fff4b8;
  --tier-swatch: #ffd84d;
}
[data-tier="platinum"] {
  --tier-main: url(#grad-rainbow);
  --tier-deep: #6355ea;
  --tier-soft: #efeaff;
  --tier-swatch: linear-gradient(135deg, #00e676, #00e5ff 35%, #2962ff 65%, #d500f9);
}