/* PI Design Starter — tokens.css (v0.2 merged) */
/* If you self-host fonts later, replace the import. */
@import url("https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap");

:root{
  /* Colors */
  --pi-page:           #EAE9E9;
  --pi-surface:        #F6F6F6;
  --pi-search-bckg:    #FFFFFF;
  --pi-text:           #000000;
  --pi-text-strong:    #151515;
  --pi-border-color:   rgba(228,228,228,0.5);

  /* Brand */
  --pi-primary:        #371F7F;
  --pi-primary-600:    #0f0f0f;
  --pi-danger:         #D92D20;
  --pi-danger-600:     #B42318;

  /* Form helpers */
  --pi-placeholder:    rgba(0,0,0,0.45);
  --pi-focus-ring:     #151515;

  /* Typography */
  --pi-font-display:   "Bebas Neue", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;

  /* Scales */
  --pi-h1-size:        40px;
  --pi-h1-line:        48px;
  --pi-h2-size:        28px;
  --pi-h2-line:        36px;
  --pi-h3-size:        22px;
  --pi-h3-line:        28px;
  --pi-h4-size:        18px;
  --pi-h4-line:        24px;
  --pi-body-size:      16px;
  --pi-body-line:      24px;


  /* Metric label (for future use) */
  --pi-metric-label-size: 24px;
  --pi-metric-label-line: 64px;

  /* Radii */
  --pi-radius-card:    24px;
  --pi-radius-input:   20px;
  --pi-radius-btn:     12px;

  /* Borders & shadows */
  --pi-border:         1px solid var(--pi-border-color);
  --pi-shadow-soft:    6px 6px 48px rgba(27,15,62,0.05);

  /* Spacing */
  --pi-space-1: 8px;
  --pi-space-2: 12px;
  --pi-space-3: 16px;
  --pi-space-4: 20px;
  --pi-space-5: 24px;
  --pi-space-6: 32px;

  /* Transitions */
  --pi-ease:    cubic-bezier(.2,.8,.2,1);
  --pi-quick:   140ms var(--pi-ease);

  /* Alias for backward-compat */
  --pi-bg: var(--pi-page);
}