/*
 * Kaynii Polls — design tokens.
 * Single source of truth for color/type/space. Never hardcode these values
 * in templates or component CSS — reference the custom properties instead.
 * Mirrors the design brief in CLAUDE.md exactly.
 */

/* Self-hosted Fraunces (headings/logo, weight 600 only -- the only weight
   the type scale ever uses it at) + Inter (everything else, weights 400/
   500/600) -- woff2 files live in /static/fonts/, no external font CDN is
   ever called at runtime, per the design brief. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/static/fonts/inter-400.woff2") format("woff2");
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/static/fonts/inter-500.woff2") format("woff2");
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/static/fonts/inter-600.woff2") format("woff2");
}

@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/static/fonts/fraunces-600.woff2") format("woff2");
}

:root {
  /* Base surfaces */
  --color-bg: #faf6ef;
  --color-surface: #ffffff;
  --color-surface-sunken: #f3ecdf;
  --color-border: #e4dac6;
  --color-border-strong: #2a2420;

  /* Text */
  --color-text: #211c17;
  --color-text-muted: #6b6154;
  --color-text-faint: #9c9182;
  --color-text-on-primary: #ffffff;
  --color-text-on-dark: #faf6ef;

  /* Primary accent — "ember" */
  --color-primary: #d9491a;
  --color-primary-hover: #b93a12;
  --color-primary-active: #9c300f;
  --color-primary-tint: #fbe4d6;
  --color-primary-tint-strong: #f4c3a8;

  /* Secondary accent — "ink plum" */
  --color-secondary: #4b3b54;
  --color-secondary-hover: #3b2e42;
  --color-secondary-tint: #e9e1ec;

  /* Status */
  --color-success: #2e7d4f;
  --color-success-tint: #dceee1;
  --color-danger: #b3261e;
  --color-danger-hover: #94201a;
  --color-danger-tint: #f8dad7;
  --color-open: #2e7d4f;
  --color-open-tint: #dceee1;
  --color-closed: #6b6154;
  --color-closed-tint: #eae4d8;

  /* Focus */
  --color-focus-ring: #1d6fbf;

  /* Type scale */
  --font-display: 2.75rem;
  --font-h1: 2rem;
  --font-h2: 1.375rem;
  --font-h3: 1.0625rem;
  --font-body: 1rem;
  --font-body-sm: 0.875rem;
  --font-caption: 0.75rem;

  --font-heading: "Fraunces", Georgia, "Times New Roman", serif;
  --font-ui: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial,
    sans-serif;

  /* Spacing */
  --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;

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-pill: 999px;
}