/* Hip-Hop House Party design tokens.
   Direction: Brutalist Utility, composed free-form (a poster wall).
   Materials: a black wall, cream paper, duct tape, one safety orange for ACTIONS only. */

@font-face { font-family: "Anton"; src: url("/fonts/anton-400.woff2") format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0000-00FF, U+2010-2019, U+2026; }
@font-face { font-family: "Hanken"; src: url("/fonts/hanken-var.woff2") format("woff2"); font-weight: 300 800; font-display: swap; unicode-range: U+0000-00FF, U+2010-2019, U+2026; }
@font-face { font-family: "Martian"; src: url("/fonts/martianmono-var.woff2") format("woff2"); font-weight: 100 800; font-display: swap; unicode-range: U+0000-00FF, U+2010-2019, U+2026; }

:root {
  --font-display: "Anton", Impact, "Arial Black", sans-serif;
  --font-body: "Hanken", Helvetica, Arial, sans-serif;
  --font-accent: "Martian", ui-monospace, Menlo, monospace;

  /* palette */
  --color-black: #0d0d0d;
  --color-cream: #f3efe6;
  --color-white: #ffffff;
  --color-orange: #ff4d00;      /* actions only */
  --color-tape: #b4b5af;
  --color-tape-2: #c6c7c1;
  --color-ink-2: #2e2e2c;       /* secondary on cream, 11:1 */
  --color-paper-2: #ebe9e2;     /* secondary on black, 14:1 */
  --color-ok: #1d7a3a;
  --color-warn: #b45309;

  /* fluid type */
  --text-xs: clamp(.82rem, .78rem + .2vw, .92rem);
  --text-sm: clamp(.98rem, .92rem + .3vw, 1.08rem);
  --text-base: clamp(1.08rem, 1rem + .4vw, 1.25rem);
  --text-lg: clamp(1.35rem, 1.15rem + .9vw, 1.9rem);
  --text-xl: clamp(2.1rem, 1.4rem + 3vw, 4rem);
  --text-2xl: clamp(3.6rem, 1.2rem + 11vw, 11rem);

  /* fluid space */
  --space-xs: clamp(.25rem, .2rem + .25vw, .5rem);
  --space-sm: clamp(.5rem, .4rem + .5vw, 1rem);
  --space-md: clamp(1rem, .8rem + 1vw, 1.75rem);
  --space-lg: clamp(2rem, 1.5rem + 2.5vw, 4rem);
  --space-xl: clamp(3rem, 2rem + 5vw, 7rem);

  /* radius language: none. Tape and paper have edges, not corners. */
  --radius-sm: 0;
  --radius-md: 0;
  --radius-lg: 0;

  --ease-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-in-out: cubic-bezier(0.42, 0, 0.58, 1);
  --duration-fast: 150ms;
  --duration-normal: 300ms;
  --duration-slow: 500ms;

  --wrap: 82rem;
}
