/* stplr brand tokens — derived from STPLR Brand Guidelines v1.0 */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;600;700;800&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root {
  /* Color palette */
  --stplr-deep-blue:    #003366;  /* primary accent, brand */
  --stplr-orange:       #FFA500;  /* secondary accent */
  --stplr-charcoal:     #212121;  /* dark-mode background, icon field */
  --stplr-silver:       #D6D6D6;  /* main text on dark, light backgrounds */
  --stplr-silver-metal: #E1E4E7;  /* staple metallic */
  --stplr-near-white:   #F3F4F5;

  /* Type */
  --stplr-font-display: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --stplr-font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Semantic (light theme default) */
  --stplr-bg:     var(--stplr-near-white);
  --stplr-fg:     var(--stplr-charcoal);
  --stplr-accent: var(--stplr-deep-blue);
}

@media (prefers-color-scheme: dark) {
  :root {
    --stplr-bg:     var(--stplr-charcoal);
    --stplr-fg:     var(--stplr-silver);
    --stplr-accent: var(--stplr-orange);
  }
}

/* Wordmark helper — render STPLR. in markup as
   <span class="stplr-wordmark">STPLR<span class="dot">.</span></span> */
.stplr-wordmark {
  font-family: var(--stplr-font-display);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--stplr-fg);
}
.stplr-wordmark .dot { color: var(--stplr-orange); }

code, pre, .stplr-mono { font-family: var(--stplr-font-mono); }