/* ============================================
   Fractional Pulse — Design Tokens
   Generated 2026-03-14
   ============================================ */

:root {
  /* ---- Brand Colors ---- */
  --fp-teal:            #2DD4A8;
  --fp-teal-light:      #5EEDC5;
  --fp-teal-dark:       #1FAF8A;
  --fp-teal-muted:      rgba(45, 212, 168, 0.15);
  --fp-teal-ghost:      rgba(45, 212, 168, 0.06);

  --fp-dark:            #0F1923;
  --fp-dark-surface:    #162232;
  --fp-dark-elevated:   #1C2D3F;
  --fp-dark-border:     rgba(255, 255, 255, 0.08);

  --fp-white:           #FFFFFF;
  --fp-gray-100:        rgba(255, 255, 255, 0.85);
  --fp-gray-200:        rgba(255, 255, 255, 0.6);
  --fp-gray-300:        rgba(255, 255, 255, 0.4);
  --fp-gray-400:        rgba(255, 255, 255, 0.2);

  /* ---- Semantic ---- */
  --fp-bg:              var(--fp-dark);
  --fp-bg-surface:      var(--fp-dark-surface);
  --fp-bg-elevated:     var(--fp-dark-elevated);
  --fp-text-primary:    var(--fp-white);
  --fp-text-secondary:  var(--fp-gray-200);
  --fp-text-muted:      var(--fp-gray-300);
  --fp-accent:          var(--fp-teal);
  --fp-accent-hover:    var(--fp-teal-light);
  --fp-border:          var(--fp-dark-border);

  /* ---- Typography ---- */
  --fp-font-display:    'Plus Jakarta Sans', 'Helvetica Neue', Arial, sans-serif;
  --fp-font-body:       'Plus Jakarta Sans', 'Helvetica Neue', Arial, sans-serif;
  --fp-font-mono:       'Source Code Pro', 'Fira Code', monospace;

  --fp-text-xs:         0.75rem;    /* 12px */
  --fp-text-sm:         0.875rem;   /* 14px */
  --fp-text-base:       1rem;       /* 16px */
  --fp-text-lg:         1.125rem;   /* 18px */
  --fp-text-xl:         1.25rem;    /* 20px */
  --fp-text-2xl:        1.5rem;     /* 24px */
  --fp-text-3xl:        2rem;       /* 32px */
  --fp-text-4xl:        2.5rem;     /* 40px */

  --fp-weight-regular:  400;
  --fp-weight-medium:   500;
  --fp-weight-semibold: 600;
  --fp-weight-bold:     700;

  --fp-leading-tight:   1.25;
  --fp-leading-normal:  1.5;
  --fp-leading-relaxed: 1.7;

  /* ---- Spacing ---- */
  --fp-space-1:         0.25rem;    /* 4px */
  --fp-space-2:         0.5rem;     /* 8px */
  --fp-space-3:         0.75rem;    /* 12px */
  --fp-space-4:         1rem;       /* 16px */
  --fp-space-6:         1.5rem;     /* 24px */
  --fp-space-8:         2rem;       /* 32px */
  --fp-space-12:        3rem;       /* 48px */
  --fp-space-16:        4rem;       /* 64px */
  --fp-space-24:        6rem;       /* 96px */

  /* ---- Radii ---- */
  --fp-radius-sm:       4px;
  --fp-radius-md:       8px;
  --fp-radius-lg:       12px;
  --fp-radius-xl:       16px;
  --fp-radius-full:     9999px;

  /* ---- Shadows ---- */
  --fp-shadow-sm:       0 1px 2px rgba(0, 0, 0, 0.3);
  --fp-shadow-md:       0 4px 12px rgba(0, 0, 0, 0.25);
  --fp-shadow-lg:       0 8px 24px rgba(0, 0, 0, 0.3);
  --fp-shadow-glow:     0 0 20px rgba(45, 212, 168, 0.08);

  /* ---- Transitions ---- */
  --fp-ease:            cubic-bezier(0.4, 0, 0.2, 1);
  --fp-duration-fast:   150ms;
  --fp-duration-base:   200ms;
  --fp-duration-slow:   300ms;
}