/**
 * Profit Builders Design Tokens
 * Source: Brand Guidelines 2020
 *
 * Import this file (or copy its :root block) into any PBI project.
 * All variables are prefixed --pb- to avoid collisions.
 */

@import url('https://fonts.googleapis.com/css2?family=Proxima+Nova:wght@400;500;600;700&display=swap');
/* Note: Effra is a commercial font — load via your licensed CDN or @font-face */

:root {
  /* ─── Core Colors ─────────────────────────────────── */
  --pb-dark:         #101921;   /* PANTONE Black 6C */
  --pb-gray:         #A1AAAD;   /* PANTONE 429C     */
  --pb-white:        #FFFFFF;

  /* ─── Gradient Palette ────────────────────────────── */
  --pb-blue-deep:    #005EE8;
  --pb-blue:         #0083E5;
  --pb-cyan:         #09AADB;
  --pb-teal:         #00CEA6;
  --pb-green-light:  #1AD87D;
  --pb-green:        #2EDB53;
  --pb-green-bright: #1DDB38;

  /* ─── Gradients ───────────────────────────────────── */
  --pb-gradient:            linear-gradient(135deg, #005EE8, #1DDB38);
  --pb-gradient-lr:         linear-gradient(to right, #005EE8, #1DDB38);
  --pb-gradient-blue:       linear-gradient(135deg, #005EE8, #09AADB);
  --pb-gradient-green:      linear-gradient(135deg, #00CEA6, #1DDB38);
  --pb-gradient-blue-teal:  linear-gradient(135deg, #0083E5, #00CEA6);

  /* ─── Semantic Tokens (use these in UI code) ──────── */
  --pb-bg-dark:           #101921;
  --pb-bg-light:          #FFFFFF;
  --pb-text-primary:      #101921;
  --pb-text-on-dark:      #FFFFFF;
  --pb-text-muted:        #A1AAAD;
  --pb-primary:           #0083E5;
  --pb-primary-dark:      #005EE8;
  --pb-accent:            #1AD87D;
  --pb-border-on-dark:    rgba(161, 170, 173, 0.2);
  --pb-border-on-light:   rgba(16, 25, 33, 0.12);

  /* ─── Typography ──────────────────────────────────── */
  --pb-font-headline: 'Effra', 'Helvetica Neue', Arial, sans-serif;
  --pb-font-body:     'Proxima Nova', proxima-nova, 'Helvetica Neue', Arial, sans-serif;

  --pb-weight-regular:  400;
  --pb-weight-medium:   500;
  --pb-weight-semibold: 600;
  --pb-weight-bold:     700;
  --pb-weight-heavy:    900;  /* Effra Heavy only */
}

/* ─── Utility Classes (optional — include if not using Tailwind) ─── */

.pb-gradient-text {
  background: var(--pb-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.pb-gradient-bg {
  background: var(--pb-gradient);
}

.pb-dark-bg {
  background-color: var(--pb-dark);
  color: var(--pb-text-on-dark);
}