/* compass-tokens.css - conservative defaults for the `--cmp-*` design-token surface.
 *
 * The live values come from `BrandThemeProvider` (Shared/BrandThemeProvider.razor),
 * which emits the full bundle as inline styles on the `<div class="cmp">` wrapper.
 * Anything rendered OUTSIDE that wrapper (the initial loading splash before
 * authentication, error boundaries that bypass MainLayout, etc.) reads from these
 * fallbacks so the page never flashes as raw HTML.
 *
 * Per the renderer spec §1 (Hard rules) - components NEVER branch on theme values in C#;
 * CSS handles every theme-conditional appearance. These defaults make that contract
 * coherent across surfaces too: even a 404 page renders with consistent neutrals.
 *
 * Source of truth for tenant-controlled values lives in
 * `Contracts/Branding/DefaultThemes.cs` and the tenant branding form in Threshold
 * (out of scope for this spec). These are NOT tenant values - they are defaults for
 * "no tenant context yet."
 *
 * Scoping: the selector list includes both `[data-surface="compass"]` and `:root`
 * so the tokens resolve at the bare document root (Compass, whose whole document
 * is the applicant surface) AND inside a scoped `data-surface="compass"` island
 * (Threshold Quick preview / Atlas SystemAppDef preview, where the host chrome
 * owns the document root and the Compass form renders in a bounded island). The
 * variable definitions are identical in both scopes; keeping `:root` means
 * Compass output is unchanged.
 */
[data-surface="compass"], :root {
  /* Neutrals - safe defaults if a tenant context hasn't loaded. */
  --cmp-bg-app:        #F4F0E7;
  --cmp-bg-panel:      #FFFFFF;
  --cmp-bg-soft:       #FBF7EE;
  --cmp-border:        #E0D8C5;
  --cmp-border-strong: #C7BCA1;
  --cmp-text:          #1A2433;
  --cmp-text-muted:    #5A6473;
  --cmp-text-subtle:   #8A8674;
  --cmp-success:       #2F7A4F;
  --cmp-warning:       #A66B0E;
  --cmp-danger:        #8A1F1F;

  /* Brand placeholders - overridden the moment a tenant theme loads. */
  --cmp-primary:        #0F2C4A;
  --cmp-primary-fg:     #FFFFFF;
  --cmp-primary-soft:   rgba(15, 44, 74, 0.08);
  --cmp-primary-hover:  #0A1E33;
  --cmp-secondary:      #C2A06A;
  --cmp-secondary-soft: rgba(194, 160, 106, 0.18);
  --cmp-accent:         #6F1A20;

  /* Typography - system-fallback stacks; the tenant bundle adds the named families. */
  --cmp-font-headline: Georgia, serif;
  --cmp-font-body:     system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;

  /* Radius scale - defaults to the `soft` step from the design system. */
  --cmp-radius-sm:   4px;
  --cmp-radius-md:   8px;
  --cmp-radius-lg:   12px;
  --cmp-radius-pill: 999px;

  /* Eyebrow defaults */
  --cmp-eyebrow-color:    var(--cmp-text-subtle);
  --cmp-eyebrow-tracking: 0.14em;
  --cmp-lede-color:       var(--cmp-text-muted);

  /* Section title + group head - fallbacks for the no-tenant path. The live
     values come from BrandThemeProvider's inline styles (which win over these
     :root rules), so these only apply when no tenant context has loaded.
     compass-rendering.css references all of these. */
  --cmp-sectitle-font:   var(--cmp-font-headline);
  --cmp-sectitle-size:   28px;
  --cmp-sectitle-weight: 700;
  --cmp-sectitle-color:  var(--cmp-text);
  --cmp-grouphead-font:      var(--cmp-font-headline);
  --cmp-grouphead-size:      16px;
  --cmp-grouphead-weight:    700;
  --cmp-grouphead-color:     var(--cmp-text);
  --cmp-grouphead-underline: var(--cmp-primary);

  /* Check / selection accent (rail complete-icon, ChoiceField selection). */
  --cmp-check-bg: var(--cmp-primary);
  --cmp-check-fg: var(--cmp-primary-fg);

  /* Section rail - fallbacks for the no-tenant path (see note above). */
  --cmp-rail-bg:                 var(--cmp-bg-panel);
  --cmp-rail-border-right:       var(--cmp-border);
  --cmp-rail-title-color:        var(--cmp-text-subtle);
  --cmp-rail-progress-fg:        var(--cmp-text-muted);
  --cmp-rail-progress-strong:    var(--cmp-text);
  --cmp-rail-item-color:         var(--cmp-text-muted);
  --cmp-rail-item-hover-bg:      var(--cmp-bg-soft);
  --cmp-rail-active-bg:          var(--cmp-primary-soft);
  --cmp-rail-active-color:       var(--cmp-primary);
  --cmp-rail-active-bar:         var(--cmp-primary);
  --cmp-rail-active-icon-bg:     transparent;
  --cmp-rail-active-icon-border: var(--cmp-primary);
  --cmp-rail-num-color:          var(--cmp-text-subtle);
  --cmp-rail-divider:            var(--cmp-border);
  --cmp-rail-untouched-border:   var(--cmp-border-strong);

  /* Topbar fallback - readable neutral chrome. */
  --cmp-topbar-bg:            #FFFFFF;
  --cmp-topbar-fg:            var(--cmp-text);
  --cmp-topbar-border-bottom: 1px solid var(--cmp-border);
  --cmp-topbar-stripe-color:  transparent;
  --cmp-topbar-stripe-height: 0px;
}