/* ApexSpark brand layer — v1 (Sept 2026). Spec: apexspark-app/docs/brand/TOKENS.md
 *
 * Two layers:
 *   --as-*     ApexSpark tokens from the brand pack. The dark block below only
 *              flips these tokens; the web pages themselves stay light.
 *   --brand-*  What the pages actually use for the accent. Defaults = ApexSpark
 *              (light values, because every page has light surfaces). A tenant
 *              that has chosen its own colour overrides these on <html> via
 *              public/js/branding.js (and the inline head cache script), so a
 *              tenant's own colour always wins over the platform default.
 *
 *   --brand-accent          filled backgrounds (buttons, active chips, bars)
 *   --brand-on-accent       text / icons on --brand-accent
 *   --brand-accent-hover    hover state of a filled accent background
 *   --brand-accent-text     accent text, links, icons on white / paper (>= 4.5:1)
 *   --brand-accent-on-dark  accent text on ink / black bands (>= 4.5:1)
 *   --brand-accent-soft     soft tint background (pills, selected rows)
 *   --brand-on-accent-soft  text on --brand-accent-soft
 * No gradients, no shadows added here.
 */
:root {
  --as-ink: #0F0F14;
  --as-paper: #F6F6F8;
  --as-surface: #FFFFFF;
  --as-text: #0F0F14;
  --as-text-2: #45454E;
  --as-muted: #6B6B76;
  --as-line: #E4E4EA;
  --as-ember: #EA580C;
  --as-accent: #C2410C;
  --as-on-accent: #FFFFFF;
  --as-accent-soft: #FFEDD5;
  --as-on-accent-soft: #9A3412;
  --as-on-ink: #F6F6F8;

  --as-font-display: 'Space Grotesk', 'Instrument Sans', Helvetica, Arial, sans-serif;
  --as-font-text: 'Instrument Sans', Helvetica, Arial, sans-serif;
  --as-font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Tenant-overridable accent layer (ApexSpark defaults, light values). */
  --brand-accent: #C2410C;            /* = --as-accent (light) */
  --brand-on-accent: #FFFFFF;         /* = --as-on-accent (light) — 5.18:1 */
  --brand-accent-hover: #9A3412;
  --brand-accent-text: #C2410C;       /* 5.18:1 on white, 4.75:1 on #F5F5F5 */
  --brand-accent-on-dark: #FB923C;    /* 7.56:1 on #1A1C1C, 5.58:1 on #333 */
  --brand-accent-soft: #FFEDD5;       /* = --as-accent-soft */
  --brand-on-accent-soft: #9A3412;    /* 6.38:1 on the soft tint */
}

@media (prefers-color-scheme: dark) {
  :root {
    --as-paper: #0F0F14;
    --as-surface: #1A1A22;
    --as-text: #F6F6F8;
    --as-text-2: #A1A1AA;
    --as-muted: #A1A1AA;
    --as-line: #2A2A33;
    --as-accent: #FB923C;
    --as-on-accent: #0F0F14;
    --as-accent-soft: #3A1F12;
    --as-on-accent-soft: #FDBA74;
  }
}

/* Brand spot: default ApexSpark mark, or the tenant's own logo (branding.js). */
.as-brand-logo { display: inline-block; height: 28px; width: auto; max-width: 160px; object-fit: contain; vertical-align: middle; flex-shrink: 0; }
.as-brand-logo.as-mark { width: 28px; }
.sidebar-brand .as-brand-logo { display: block; height: 32px; margin-bottom: 10px; }
.sidebar-brand .as-brand-logo.as-mark { width: 32px; }
/* A tenant logo placed on an ink band sits on a white tile so dark logos stay visible. */
.as-brand-logo.as-logo-tile { background: #FFFFFF; padding: 6px 10px; border-radius: 8px; box-sizing: content-box; }