/* NuFlow design tokens — ported 1:1 from the design system (_ds/tokens/*).
   Locked, founder-approved. Never alter these values. */

/* Webfonts — Outfit (display), Figtree (body/UI), JetBrains Mono (data/metrics).
   Self-hosted (variable, latin subset) so the theme makes no third-party request.
   The @font-face rules are inlined in layout/theme.liquid so they can use asset_url
   (versioned) and match the <link rel=preload> URLs exactly — a relative url() here
   would resolve unversioned and cause the preloaded files to be fetched twice. */
:root {
  /* Brand */
  --blue: #2563FF;
  --blue-hover: #1E51D6;
  --blue-tint: rgba(37, 99, 255, 0.10);
  --mint: #2EC58F;
  --mint-deep: #1F9A6E;
  --mint-tint: rgba(46, 197, 143, 0.12);

  /* Neutrals (cool, blue-tinted) */
  --ink: #0A0A0A;
  --text-2: #5F6673;
  --text-3: #8A8F99;
  --surface: #F7F8FA;
  --surface-card: #FFFFFF;
  --fill-subtle: #F0F1F4;
  --border: #E9EBF0;
  --border-strong: #D5D9E2;

  /* Semantic aliases */
  --accent: var(--blue);
  --accent-hover: var(--blue-hover);
  --positive: var(--mint);
  --positive-text: var(--mint-deep);
  --text-body: var(--ink);
  --text-muted: var(--text-2);

  /* Type */
  --font-display: "Outfit", system-ui, sans-serif;
  --font-sans: "Figtree", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --weight-body: 500;
  --weight-semi: 600;
  --weight-bold: 700;
  --leading-body: 1.55;
  --leading-tight: 1.15;
  --tracking-display: -0.02em;
  --tracking-overline: 1px;

  /* Spacing & shape */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-7: 28px; --space-8: 32px;
  --space-10: 40px; --space-12: 48px; --space-16: 64px;
  --radius-card: 16px;
  --radius-input: 12px;
  --radius-tile: 10px;
  --radius-tag: 999px;
  --radius-pill: 999px;

  /* Effects */
  --shadow-card: 0 1px 3px rgba(10, 10, 10, 0.04);
  --shadow-raised: 0 1px 3px rgba(10, 10, 10, 0.08);
  --shadow-pop: 0 8px 24px rgba(10, 10, 10, 0.12);
  --focus-ring: 0 0 0 3px rgba(37, 99, 255, 0.15);
  --ease: cubic-bezier(0.2, 0.7, 0.3, 1);
  --duration-fast: 120ms;
  --duration-base: 180ms;

  /* Type scale (tokens; components often use in-between px values) */
  --text-xs: 11px;  --text-sm: 12.5px; --text-base: 14px; --text-md: 15px;
  --text-lg: 18px;  --text-xl: 24px;   --text-2xl: 32px;  --text-3xl: 44px; --text-hero: 64px;

  /* Layout */
  --container-max: 1084px;

  /* Goal colors — 7 goals, canonical order: Fat Loss, Performance, Recovery,
     Aesthetics, Longevity, Cognitive, Libido. base = fills/borders/glyphs/labels
     (white on top of base); tint = product-badge surface only; deep = badge label text only. */
  --goal-fatloss: #E50019;      --goal-fatloss-tint: #FCE6E8;      --goal-fatloss-deep: #D50017;
  --goal-performance: #1A57FF;  --goal-performance-tint: #E8EEFF;  --goal-performance-deep: #1452FF;
  --goal-recovery: #00A855;     --goal-recovery-tint: #E6F6EE;     --goal-recovery-deep: #007E3E;
  --goal-aesthetics: #00B9CD;   --goal-aesthetics-tint: #E6F8FA;   --goal-aesthetics-deep: #007A88;
  --goal-longevity: #A70DFF;    --goal-longevity-tint: #F6E7FF;    --goal-longevity-deep: #A000F5;
  --goal-cognitive: #FFC923;    --goal-cognitive-tint: #FFFAE9;    --goal-cognitive-deep: #8D6D00;
  --goal-libido: #F500A2;       --goal-libido-tint: #FEE6F6;       --goal-libido-deep: #C90084;
}