/* Valueflow Design Tokens
   Source of truth for colors, type, spacing, radius, and motion.
   Import this or reference it so Claude Design builds with real tokens. */

:root {
  /* ---- Color: Primary ---- */
  --vf-midnight:       #150333;
  --vf-signal-blue:    #0974BA;
  --vf-signal-blue-hover: #0860A0;
  --vf-control-purple: #4D3593;

  /* ---- Color: Extended ---- */
  --vf-soft-violet: #9779BB;
  --vf-sky-blue:    #50AAD8;
  --vf-pale-cyan:   #99DEF0;

  /* ---- Color: Accent (use sparingly) ---- */
  --vf-mist-lavender: #B9AAE6;

  /* ---- Color: Neutral ---- */
  --vf-white:      #FFFFFF;
  --vf-off-white:  #F5F6FA;
  --vf-light-gray: #E5E7EB;
  --vf-mid-gray:   #6B7280;
  --vf-near-black: #111827;

  /* ---- Gradient (covers + dividers only, one per layout) ---- */
  --vf-gradient-hero: linear-gradient(135deg, #150333 0%, #4D3593 45%, #0974BA 100%);

  /* ---- Typography ---- */
  --vf-font-heading: 'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --vf-font-body:    'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --vf-font-label:   'Montserrat', 'Trebuchet MS', sans-serif;

  --vf-weight-light:   300;
  --vf-weight-regular: 400;
  --vf-weight-semibold:600;
  --vf-weight-bold:    700;
  --vf-weight-black:   900;

  --vf-size-display: 56px;   /* 52-64 */
  --vf-size-h1:      36px;   /* 34-40 */
  --vf-size-h2:      24px;   /* 22-26 */
  --vf-size-h3:      16px;   /* 15-17 */
  --vf-size-eyebrow: 11px;
  --vf-size-body:    16px;   /* 15-16 */
  --vf-size-caption: 13px;   /* 12-13 */

  --vf-leading-display: 1.05;
  --vf-leading-heading: 1.15;
  --vf-leading-body:    1.7;
  --vf-tracking-eyebrow: 0.12em;

  /* ---- Spacing scale ---- */
  --vf-space-xs:      4px;
  --vf-space-sm:      8px;
  --vf-space-base:    16px;
  --vf-space-md:      24px;
  --vf-space-lg:      32px;
  --vf-space-xl:      48px;
  --vf-space-2xl:     64px;
  --vf-space-section: 80px;

  /* ---- Radius ---- */
  --vf-radius-sm:   6px;   /* small elements */
  --vf-radius-btn:  8px;   /* buttons */
  --vf-radius-card: 10px;  /* cards, inputs */
  --vf-radius-lg:   12px;  /* large cards, sections */
  --vf-radius-pill: 20px;  /* pills, tags */

  /* ---- Layout ---- */
  --vf-max-width: 1200px;
  --vf-gutter:    24px;
  --vf-section-pad-y: 80px;
  --vf-section-pad-x: 72px;

  /* ---- Motion ---- */
  --vf-transition-hover:  150ms ease;
  --vf-transition-reveal: 200ms ease;

  /* ---- Focus / state ---- */
  --vf-focus-ring: 0 0 0 2px #FFFFFF, 0 0 0 4px #0974BA; /* 2px ring, 2px offset */
  --vf-disabled-opacity: 0.4;
}

/* Data-viz series order */
/* 1 --vf-signal-blue | 2 --vf-control-purple | 3 --vf-sky-blue | 4 --vf-soft-violet | 5 --vf-pale-cyan */

/* RETIRED — do not use: #FF2886 (hot pink), #D578DB (orchid) */