wulf-pulse/app/styles/brand.css

/* === Wulf Consulting brand layer ====================================
 *
 * Authoritative palette per the Logo Standards Guide (docs/StandardsGuide
 * (1).pdf, dated 2013-09-04):
 *
 *   Primary blue   #0075AD  (Pantone 110-7 U)
 *   Secondary gray #6D6E70  (Pantone 179-10 U)
 *   Primary face   Helvetica / Arial — Bold for headers, Light for tagline
 *   Tagline        "Don't be afraid to cry"  (Helvetica Light, gray, 16pt ref.)
 *
 * Typography update (2026-05): the brand-mandated Helvetica/Arial has
 * been replaced with IBM Plex Sans.  Plex Sans honors the spirit of the
 * mandate (clean engineered sans, supports a Light weight for the
 * tagline) while loading reliably from Google Fonts; Helvetica/Arial
 * stay in the fallback chain so the look degrades gracefully.  Plex
 * Mono carries numeric data (KPIs, IDs, timestamps).
 *
 * Imported once from app/globals.css.  The :root overrides below repoint
 * --primary / --ring / --accent / fonts; the rest of the shadcn token
 * graph stays untouched.
 * ==================================================================== */

:root {
  /* --- Brand-scoped tokens (do not consume directly from components;
         they exist so we can reason about brand vs. app intent). ---- */
  --wulf-blue: oklch(0.540 0.136 233.3);          /* #0075AD */
  --wulf-blue-700: oklch(0.470 0.142 234.5);      /* hover / pressed */
  --wulf-blue-300: oklch(0.760 0.090 232);        /* tinted fills */
  --wulf-gray: oklch(0.515 0.001 271);            /* #6D6E70 */
  --wulf-gray-100: oklch(0.970 0.002 271);        /* near-white surface */
  --wulf-gray-300: oklch(0.880 0.002 271);        /* borders */
  --wulf-gray-700: oklch(0.380 0.002 271);        /* body text on light bg */

  /* --- App-level overrides: repoint shadcn tokens to Wulf values. ---
         Light theme. --- */
  --primary: var(--wulf-blue);
  --primary-foreground: oklch(0.985 0 0);
  --accent: var(--wulf-blue);
  --accent-foreground: oklch(0.985 0 0);
  --ring: var(--wulf-blue);
  --sidebar-primary: var(--wulf-blue);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-ring: var(--wulf-blue);

  /* Chart slot 2 = Wulf Blue so single-series charts default to brand. */
  --chart-2: var(--wulf-blue);

  /* Font tokens are wired in app/globals.css (@theme inline) — they
     resolve --font-helvetica and --font-plex-mono variables that are
     supplied by app/layout.tsx via next/font.  We don't override them
     here. */
}

.dark {
  /* Slightly lifted blue for dark surfaces — keeps the tone, raises L. */
  --primary: oklch(0.660 0.150 233.3);
  --accent: oklch(0.660 0.150 233.3);
  --ring: oklch(0.660 0.150 233.3);
  --sidebar-primary: oklch(0.660 0.150 233.3);
  --sidebar-ring: oklch(0.660 0.150 233.3);
  --chart-2: oklch(0.660 0.150 233.3);
}

/* === Utility classes ================================================
 *
 * These are the canonical helpers for the dashboard refresh.  Prefer
 * them over re-rolling spacing / typography per page.
 * ==================================================================== */

@utility num {
  /* Numeric data — tabular nums in the mono face.  Use on KPI values,
     table cells, timestamps, IDs.  Never wrap full sentences in this. */
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

@utility num-lg {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.015em;
  font-size: 1.875rem;          /* text-3xl */
  line-height: 2.25rem;
  font-weight: 500;
}

@utility num-xl {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  font-size: 2.25rem;           /* text-4xl */
  line-height: 2.5rem;
  font-weight: 600;
}

@utility metric-label {
  /* Pair with .num / .num-lg.  11px uppercase tracked label sitting
     above a metric value. */
  font-size: 0.6875rem;         /* 11px */
  line-height: 1rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--muted-foreground);
}

@utility surface-brand {
  background-color: var(--wulf-gray-100);
}

@utility surface-brand-ink {
  background-color: var(--wulf-gray);
  color: oklch(0.985 0 0);
}

@utility rule-brand {
  /* The 2px Wulf-blue rule used under PageHeader when accent={true}.
     Echoes the standards-guide blue header band. */
  border-bottom: 2px solid var(--wulf-blue);
}

@utility text-chrome {
  /* Sidebar / chrome text. Use for nav text, table column headers, and
     anywhere the brand gray should carry weight without going full ink. */
  color: var(--wulf-gray);
}

@utility border-chrome {
  border-color: var(--wulf-gray-300);
}

@utility tagline {
  /* Footer tagline.  Helvetica Light, gray, 12px, gentle tracking.
     Do NOT use this anywhere except the page footer line. */
  font-family: var(--font-sans);
  font-weight: 300;
  color: var(--wulf-gray);
  font-size: 0.75rem;
  letter-spacing: 0.01em;
}

/* === Wolf-mark watermark ============================================
 *
 * Apply .has-mark-watermark to a positioned container; place a child
 * with class `mark-watermark` inside.  The child stays behind content
 * via z-index, anchored to the right edge.
 * ==================================================================== */

@utility has-mark-watermark {
  position: relative;
  isolation: isolate;
}

/* The child class can't be a `@utility` (it's only meaningful in the
   parent context), so it's a plain rule. */
.mark-watermark {
  position: absolute;
  inset-block: 0;
  inset-inline-end: 1.5rem;
  z-index: -1;
  opacity: 0.04;
  pointer-events: none;
  height: 100%;
  aspect-ratio: 412 / 290;       /* W mark intrinsic ratio */
  color: var(--wulf-blue);
}

.dark .mark-watermark {
  opacity: 0.06;
}