/*
  Palette — every value below is sampled, not invented.
  Source method: k-means (k=5) over visible RGB pixels, seed=42, clustered on a
  60,000-pixel sample of each asset, snapped to the real pixel closest to each
  cluster center. Ranks/shares/coordinates are from scripts/analyze_logo.py.

  brand/LOGO VERZA PNG.png            2000x2000 truecolor, no alpha (IHDR colortype 2)
    rank0 #0a0a0a share=79.4% snap_px=(817,448)
    rank4 #d3d3d3 share=3.3%  snap_px=(989,464)

  brand/LOGO VERZA PNG...png          2000x2000 truecolor+alpha (IHDR colortype 6)
    alpha: 74.5% fully transparent, 25.5% partial -> premultiplied on any resize
    rank0 #1f1f1f share=27.1% snap_px=(1058,513)
    rank1 #424242 share=25.1% snap_px=(1021,502)
    rank3 #abaaab share=16.2% snap_px=(952,483)
    rank4 #deddde share=14.2% snap_px=(984,468)

  reference/SAMPUL VERZA JPG.jpg.jpeg 1500x500, JPEG (no IHDR/alpha chunk)
    rank0 #030302 share=85.7% snap_px=(24,0)
    rank2 #f5f5f5 share=4.1%  snap_px=(99,71)   <- wordmark glyph pixels
    rank3 #484848 share=2.2%  snap_px=(1458,98)
    rank4 #959594 share=1.2%  snap_px=(192,153)
*/
:root {
  --color-bg: #0a0a0a;          /* logo PNG rank0, corroborated by banner rank0 #030302 */
  --color-surface: #1f1f1f;     /* transparent-logo rank0, card/panel backgrounds */
  --color-border: #424242;      /* transparent-logo rank1 */
  --color-muted: #959594;       /* banner rank4, secondary text */
  --color-secondary: #abaaab;   /* transparent-logo rank3, icon strokes / dividers on hover */
  --color-fg: #f5f5f5;          /* banner rank2, sampled from wordmark glyph pixels */
  --color-fg-soft: #deddde;     /* transparent-logo rank4, halo / soft highlight fill */

  --font-display: "General Sans", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;

  --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;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 150ms;
  --duration-base: 280ms;
  --duration-slow: 480ms;

  --max-width: 1200px;
}