/* Fresh — design tokens (web). Source of truth with tokens.json; aligned to mobile/lib/theme.ts. */

:root {
  /* Neutrals */
  --fresh-canvas: #0b0d10;
  --fresh-surface: #15181d;
  --fresh-surface-2: #1a1f26;
  --fresh-border: #23272e;
  --fresh-ink: #0b0d10;
  --fresh-paper: #fafaf8;

  /* Text */
  --fresh-text: #e8eaed;
  --fresh-text-dim: #9aa0a6;
  --fresh-text-faint: #5f6771;

  /* Signal green */
  --fresh-green-300: #86efac;
  --fresh-green-400: #4ade80; /* primary accent */
  --fresh-green-500: #22c55e;
  --fresh-green-600: #16a34a;
  --fresh-green-900: #0e3b22;
  --fresh-on-green: #0b0d10;

  /* Functional */
  --fresh-like: #4ade80;
  --fresh-pass: #f87171;
  --fresh-save: #8ab4f8;
  --fresh-overlay: rgba(6, 8, 10, 0.6);

  /* Typography */
  --fresh-font-display: 'Space Grotesk', system-ui, sans-serif;
  --fresh-font-body: 'Inter', system-ui, sans-serif;

  --fresh-type-display-xl: 700 clamp(44px, 7vw, 72px) / 1.02 var(--fresh-font-display);
  --fresh-type-display: 700 clamp(32px, 5vw, 48px) / 1.06 var(--fresh-font-display);
  --fresh-type-h1: 700 32px / 1.15 var(--fresh-font-display);
  --fresh-type-h2: 500 24px / 1.2 var(--fresh-font-display);
  --fresh-type-body-lg: 400 19px / 1.5 var(--fresh-font-body);
  --fresh-type-body: 400 16px / 1.5 var(--fresh-font-body);
  --fresh-type-small: 400 14px / 1.45 var(--fresh-font-body);
  --fresh-type-caption: 600 13px / 1.4 var(--fresh-font-body);

  --fresh-tracking-display: -0.02em;
  --fresh-tracking-caps: 0.06em;

  /* Space (8px base) */
  --fresh-space-1: 4px;
  --fresh-space-2: 8px;
  --fresh-space-3: 16px;
  --fresh-space-4: 24px;
  --fresh-space-5: 32px;
  --fresh-space-6: 48px;
  --fresh-space-7: 64px;
  --fresh-space-8: 96px;
  --fresh-space-9: 128px;

  /* Radius */
  --fresh-radius-sm: 8px;
  --fresh-radius-md: 12px;
  --fresh-radius-lg: 18px;
  --fresh-radius-pill: 999px;

  /* Elevation */
  --fresh-shadow-float: 0 8px 32px rgba(0, 0, 0, 0.45);
}