/* PICKDOME — brand tokens
   The gradient is the identity. Everything else exists to let it shout. */
:root {
  /* ground */
  --pd-midnight:   #0B0F14;   /* the default surface — everything sits on this */
  --pd-surface:    #12181F;   /* panels, cards */
  --pd-line:       #212A34;   /* hairlines on midnight */
  --pd-paper:      #EDEAE3;   /* the one light surface */
  --pd-ink:        #0B0F14;   /* text on paper */
  --pd-muted:      #7D8794;   /* secondary text on midnight */

  /* the spectrum — in order, always this order */
  --pd-cyan:       #22D3EE;
  --pd-violet:     #7C3AED;
  --pd-magenta:    #EC4899;
  --pd-orange:     #FF7A18;
  --pd-gold:       #FFD84D;

  /* the brand gradient. Use this, not a re-mixed one. */
  --pd-gradient: linear-gradient(135deg,
    var(--pd-cyan)    0%,
    var(--pd-violet)  28%,
    var(--pd-magenta) 60%,
    var(--pd-orange)  84%,
    var(--pd-gold)    100%);

  /* shorter run for text and small elements, where the full five reads muddy */
  --pd-gradient-text: linear-gradient(90deg,
    var(--pd-violet) 0%, var(--pd-magenta) 38%, var(--pd-orange) 72%, var(--pd-gold) 100%);

  /* WORDMARK — two-tone, always. PICK and DOME are different colours. */
  --pd-pick-on-dark:  #FFFFFF;   /* PICK on midnight, cardinal, any dark ground */
  --pd-pick-on-light: #0B0F14;   /* PICK on white / cream — white would vanish */
  --pd-dome-on-dark:  #FFD84D;   /* brand gold */
  --pd-dome-on-light: #E8A317;   /* deeper gold — brand gold washes out on white */

  /* state */
  --pd-good:  #A3E635;
  --pd-warn:  #FFD84D;
  --pd-bad:   #FB4A6B;

  --pd-radius:     14px;
  --pd-radius-lg:  22px;
  --pd-display: "Big Shoulders Display", "Arial Narrow", -apple-system, sans-serif;
  --pd-body: -apple-system, "Helvetica Neue", Arial, sans-serif;
}

/* Gradient text. Always give it a solid fallback first — background-clip fails
   silently in some contexts and unstyled text beats invisible text. */
.pd-grad-text {
  color: var(--pd-gold);
  background: var(--pd-gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Gradient rule / divider */
.pd-rule { height: 4px; border: 0; border-radius: 3px; background: var(--pd-gradient); }