@import url('../ui-foundation/tokens.css');
@import url('../ui-foundation/typography-system.css?v=1.1.0');
@import url('../ui-foundation/component-primitives.css');
@import url('./components.css');

/* Global theme authority. Load this stylesheet last. */
html, body { background: var(--gsp-bg-page); }
body { color: var(--gsp-text-primary); font-family: var(--gsp-font-body); }

.sidebar,
.joe-global-bar { background: var(--gsp-bg-shell) !important; }
.sidebar { border-right-color: var(--gsp-border-soft) !important; }
.joe-global-bar { border-bottom-color: var(--gsp-border-brand) !important; }

.nav-label { color: var(--gsp-brand-dark) !important; }
.nav a { color: var(--gsp-text-secondary) !important; }
.nav a:hover { color: var(--gsp-text-primary) !important; }
.nav a[aria-current='page'] {
  color: var(--gsp-text-primary) !important;
  background: var(--gsp-bg-card) !important;
}

.card,
.panel,
.dashboard-card,
.gptoday-opportunity,
.gptoday-personalized,
.gptoday-personalized__grid > article,
.gptoday-panel,
.gptoday-panel__stats div,
.gptoday-movers div,
.gptoday-department-grid a {
  background-color: var(--gsp-bg-card);
}

.eyebrow,
.kicker,
.section-eyebrow,
.gptoday-kicker,
.gptoday-section header span,
.gptoday-personalized header span,
.gptoday-panel header > span,
.gptoday-joe-read span {
  color: var(--gsp-brand) !important;
}

.button-primary,
.btn-primary,
.joe-global-bar__actions .is-primary {
  background: var(--gsp-brand) !important;
  border-color: var(--gsp-brand-bright) !important;
  color: var(--gsp-brand-ink) !important;
}

/* Reusable theme utilities for all new application pages. */
.gsp-surface { background: var(--gsp-bg-card); border: var(--gsp-border-width) solid var(--gsp-border); border-radius: var(--gsp-radius-lg); }
.gsp-eyebrow { color: var(--gsp-brand); font-size: var(--gsp-text-xs); font-weight: var(--gsp-weight-black); letter-spacing: var(--gsp-letter-spacing-eyebrow); text-transform: uppercase; }
.gsp-muted { color: var(--gsp-text-muted); }
.gsp-brand { color: var(--gsp-brand); }
.gsp-glow { box-shadow: var(--gsp-glow-brand); }