/*
 * Sloganista Design System tokens — ported verbatim from
 * design-system/tokens/*.css (the CEO-approved source of truth for this
 * brand). Do not invent new values here; if a token is missing, it is a
 * documented gap (see design-system/CURRENT-DESIGN-SYSTEM.md) — bring the
 * decision back to the design system first, then port it here.
 *
 * Source: design-system/tokens/fonts.css, colors.css, typography.css,
 * spacing.css, effects.css, base.css.
 */

/* ---- fonts.css ---- */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@400;500;600;700;800&family=Space+Grotesk:wght@400;500;600;700&family=Courier+Prime:wght@400;700&display=swap');

:root {
  --font-display: 'Bricolage Grotesque', 'Arial Narrow', sans-serif;
  --font-body: 'Space Grotesk', system-ui, sans-serif;
  --font-mono: 'Courier Prime', 'Courier New', monospace;

  /* ---- colors.css ---- */
  /* base ink/paper scale — warm-tinted, not cold gray */
  --ink-950: #15130F;
  --ink-800: #2B2822;
  --ink-600: #57524A;
  --ink-400: #8C857A;
  --ink-200: #D8D2C4;
  --ink-100: #EAE6DB;
  --paper: #FFFFFF;
  --bone: #F3EFE6;

  /* brand accents */
  --cobalt: #2A3EFF;
  --cobalt-700: #1C2BC9;
  --cobalt-100: #E4E7FF;

  /* secondary accent — stamp red */
  --stamp-red: #C6401D;
  --stamp-red-700: #9C3016;
  --stamp-red-100: #F7DED4;

  /* semantic */
  --signal-success: #4B6B3A;
  --signal-success-bg: #E7EDE1;
  --signal-error: #C23B22;
  --signal-error-bg: #FAE3DC;
  --signal-sale: var(--stamp-red);
  --signal-sale-bg: var(--stamp-red-100);

  /* semantic aliases — use these in components, not the raw scale above */
  --surface-page: var(--bone);
  --surface-alt: var(--ink-950);
  --surface-card: var(--paper);
  --surface-sunken: var(--ink-100);
  --text-primary: var(--ink-950);
  --text-inverse: var(--bone);
  --text-muted: var(--ink-600);
  --text-on-accent: var(--bone);
  --border-default: var(--ink-950);
  --border-subtle: var(--ink-200);
  --accent-primary: var(--cobalt);
  --accent-primary-hover: var(--cobalt-700);
  --accent-secondary: var(--stamp-red);
  --accent-secondary-hover: var(--stamp-red-700);
  --focus-ring: var(--cobalt);

  /* ---- typography.css ---- */
  --text-display-1: clamp(48px, 7vw, 96px);
  --text-display-2: clamp(36px, 5vw, 72px);
  --text-display-3: clamp(28px, 4vw, 56px);
  --text-display-4: clamp(22px, 3vw, 40px);
  --lh-display: 0.98;
  --ls-display: -0.01em;

  --text-headline-1: 32px;
  --text-headline-2: 28px;
  --text-headline-3: 24px;

  --text-body-lg: 18px;
  --text-body: 16px;
  --text-body-sm: 14px;
  --lh-body: 1.5;

  --text-label: 13px;
  --text-label-sm: 11px;
  --ls-label: 0.08em;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-bold: 700;

  /* ---- spacing.css ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;
  --container-max: 1280px;
  --container-pad: clamp(20px, 5vw, 64px);

  /* ---- effects.css ---- */
  --radius-none: 0px;
  --radius-sm: 3px;
  --radius-md: 6px;
  --radius-pill: 999px;

  --shadow-tag: 3px 3px 0 var(--ink-950);
  --shadow-tag-hover: 5px 5px 0 var(--ink-950);
  --shadow-tag-press: 1px 1px 0 var(--ink-950);
  --shadow-soft: 0 12px 32px rgba(21, 19, 15, 0.14);

  --border-w: 2px;
  --border-w-hairline: 1px;

  --ease-snap: cubic-bezier(.2, .8, .2, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;

  /*
   * Responsive breakpoints — not defined by the design system (documented
   * gap). Matches app/src/styles/tokens.css exactly: 480 small phones,
   * 768 tablet/nav collapse, 1024 desktop grid columns open up,
   * 1280 = --container-max. CSS custom properties aren't usable inside
   * @media conditions, so these are also hard-coded at each breakpoint
   * throughout the other CSS files — keep this comment as the reference.
   */
  --bp-sm: 480px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;
}

.display {
  font-family: var(--font-display);
  text-transform: uppercase;
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
}
.label {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
  font-size: var(--text-label);
}