/* Picklr design tokens — the single source of truth for the website and any
* marketing surface. Mirrors src/theme/index.ts (+ src/lib/ranks.ts) in the
* app; when you change the brand, change it in BOTH and nowhere else. Never
* hardcode a hex value in a page — reference these variables.
*
* Usage: then use var(--pickle) etc.
*/
/* Fonts: DM Sans for words, JetBrains Mono for every number (brand signature).
* For best performance prefer in the page ; this
* @import keeps a standalone page self-contained. */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@500;600;700&family=JetBrains+Mono:wght@500;700&display=swap');
:root {
/* Accent — pickle green. Use SPARINGLY as a highlight, never as a large fill. */
--pickle: #c8d92e;
--pickle-soft: #f0f4c8;
/* Ink / text */
--ink: #1a1a1a;
--ink-soft: #5a5a5a;
--ink-faint: #a8a8a8;
/* Surfaces */
--paper: #faf8f3; /* warm page background (matches the app splash) */
--paper-card: #ffffff; /* cards sit a touch brighter than paper */
--paper-2: #f4f4f3;
--line: #d8d8d8; /* hairline borders */
/* Semantic */
--success: #4caf50;
--error: #e53935;
--warning: #ff9800;
/* Rank tiers — primary = badge/label color, soft = tint. PR thresholds noted. */
--bronze: #C8793B; --bronze-soft: #F5E0C8; /* < 700 */
--silver: #A8B0BA; --silver-soft: #F2F5F9; /* 700 – 899 */
--gold: #F4B829; --gold-soft: #FFF5D4; /* 900 – 1099 */
--platinum: #5AABB8; --platinum-soft: #D5F2F4; /* 1100 – 1349 */
--diamond: #2E55C4; --diamond-soft: #D4E2F8; /* 1350 – 1649 */
--champion: #9333EA; --champion-soft: #F3E8FF; /* 1650 – 1849 */
--legend: #F03E38; --legend-soft: #FFD8CC; /* 1850+ */
/* Type */
--font-heading: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
--font-ui: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
--font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
--weight-heading: 700;
--weight-semibold: 600;
--weight-body: 500;
/* Spacing scale (mirrors the app) */
--space-xs: 4px; --space-sm: 8px; --space-md: 12px;
--space-lg: 16px; --space-xl: 20px; --space-2xl: 24px;
/* Radii */
--radius-sm: 8px; --radius-md: 12px; --radius-lg: 18px; --radius-pill: 999px;
/* Signature devices */
--card-border: 1.5px solid var(--ink); /* crisp bordered card */
}