/* Sweenies design tokens — Phase 1 */

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("../assets/fonts/bricolage-grotesque-latin-700-normal.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("../assets/fonts/bricolage-grotesque-latin-800-normal.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Space Grotesk";
  src: url("../assets/fonts/space-grotesk-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Space Grotesk";
  src: url("../assets/fonts/space-grotesk-latin-500-normal.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Space Grotesk";
  src: url("../assets/fonts/space-grotesk-latin-700-normal.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Color */
  --color-base: #faf6f1;
  --color-surface: #fffdf9;
  --color-surface-muted: #f1ebe3;
  --color-ink: #1a1410;
  --color-ink-muted: #5c534c;
  --color-accent: #FF6B4A;
  --color-accent-soft: #ffd4c8;
  --color-border: #e6ddd3;
  --color-success: #2f9e6a;
  --color-error: #d64545;

  /* Type */
  --font-display: "Bricolage Grotesque", system-ui, sans-serif;
  --font-body: "Space Grotesk", system-ui, sans-serif;
  --text-display: clamp(4rem, 8vw + 1rem, 6.875rem); /* 64–110px */
  --text-h2: clamp(2rem, 3vw + 1rem, 3rem);
  --text-h3: clamp(1.25rem, 1.2vw + 0.8rem, 1.75rem);
  --text-body: clamp(1rem, 0.3vw + 0.9rem, 1.125rem);
  --text-small: clamp(0.8125rem, 0.2vw + 0.75rem, 0.9375rem);
  --leading-display: 0.98;
  --leading-body: 1.5;

  /* Spacing (4px base) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;

  /* Radius */
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-pill: 999px;

  /* Shadows */
  --shadow-card: 0 12px 32px rgba(26, 20, 16, 0.08);
  --shadow-sticker: 4px 4px 0 rgba(26, 20, 16, 0.9);

  /* Motion */
  --duration-fast: 200ms;
  --duration-med: 400ms;
  --ease-standard: cubic-bezier(0.22, 1, 0.36, 1);

  /* Textures */
  --texture-paper: url("../assets/textures/paper-tile.webp");
  --texture-grain: url("../assets/textures/grain-overlay.webp");
}