/* Vote Files design tokens. Loaded first on every page (see DESIGN.md).
   Page stylesheets reference these custom properties instead of literal colors or font stacks,
   so a palette or type change happens here once. */


:root {
  /* Neutral surfaces, darkest text last */
  --vf-bg: #f2f2f0;
  --vf-surface: #ffffff;
  --vf-surface-2: #f6f6f4;
  --vf-rule: #e2e2de;
  --vf-rule-strong: #cfcfca;
  --vf-mute: #6b6b67;
  --vf-ink-2: #3d3d3d;
  --vf-ink: #161616;
  --vf-ink-strong: #000000;
  --vf-placeholder: #8a8a85;
  --vf-on-accent: #ffffff;
  --vf-dot: #cacac5;

  /* Accents: solid for fills, -text for readable text on light surfaces, -soft for tinted fills */
  --vf-blue: #1a63f0;
  --vf-blue-text: #1557d6;
  --vf-blue-soft: #eaf0ff;
  --vf-red: #d22630;
  --vf-red-text: #c11f2a;
  --vf-red-soft: #fde7e8;
  --vf-green: #1a9a5b;
  --vf-green-text: #11753f;
  --vf-green-soft: #e5f5ec;
  --vf-amber: #c98a00;
  --vf-amber-text: #8a5f00;
  --vf-amber-soft: #fff4d6;
  --vf-purple: #7a3f8c;
  --vf-purple-text: #6e3a7c;
  --vf-purple-soft: #f3e8f6;

  /* Type */
  --vf-font-head: "Outfit", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --vf-font-body: "Nunito Sans", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --vf-font-hand: "Patrick Hand", "Comic Sans MS", cursive;
  --vf-font-mono: Consolas, "SF Mono", ui-monospace, Menlo, monospace;

  /* Shape and depth */
  --vf-radius-sm: 10px;
  --vf-radius: 16px;
  --vf-radius-lg: 22px;
  --vf-radius-xl: 28px;
  --vf-radius-pill: 999px;
  --vf-shadow-sm: 0 1px 2px rgb(0 0 0 / .05), 0 8px 22px rgb(0 0 0 / .07);
  --vf-shadow: 0 1px 2px rgb(0 0 0 / .05), 0 18px 44px rgb(0 0 0 / .10);

  /* Layout */
  --vf-page: 1240px;
  --vf-gutter: clamp(16px, 3vw, 32px);
  --vf-measure: 72ch;

  /* Deterministic crumpled-paper texture (an SVG filter, not a raster image) */
  --vf-paper-texture: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='900'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.007' numOctaves='4' seed='3'/%3E%3CfeDiffuseLighting lighting-color='%23ffffff' surfaceScale='2'%3E%3CfeDistantLight azimuth='135' elevation='62'/%3E%3C/feDiffuseLighting%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -.22 0 0 0 .2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E");
  --vf-dot-grid: radial-gradient(circle, var(--vf-dot) 1px, transparent 1.4px);

  color-scheme: light;
}