/* FLARE theme (flare#152): every page-wide layout and chrome choice as one
 * variable, read by portal.css; tokens.css keeps the brand primitives.
 * Defaults follow the Warden web console. Titles go inside the cards by
 * giving --theme-section-* the card values and clearing --theme-card-*.
 * See docs/design.md, Theme. */
:root {
  --theme-content-width: 1120px;
  --theme-wide-width: 1680px;
  --theme-content-margin-inline: auto;
  --theme-page-padding-block: var(--bf-space-6) var(--bf-space-8);
  --theme-block-gap: var(--bf-space-6);

  --theme-page-title-display: block;
  --theme-page-title-font: var(--bf-font-display);
  --theme-page-title-size: 22px;
  --theme-page-title-weight: var(--bf-font-weight-bold);
  --theme-page-title-leading: var(--bf-leading-display);
  --theme-page-title-color: var(--app-text);
  --theme-page-title-gap: var(--bf-space-4);

  --theme-section-title-font: var(--bf-font-display);
  --theme-section-title-size: 11px;
  --theme-section-title-weight: var(--bf-font-weight-semibold);
  --theme-section-title-leading: var(--bf-leading-snug);
  --theme-section-title-color: var(--app-text-muted);
  --theme-section-title-transform: uppercase;
  --theme-section-title-tracking: 2px;
  --theme-section-title-gap: var(--bf-space-2);

  --theme-section-bg: transparent;
  --theme-section-border: 0;
  --theme-section-padding: 0;
  --theme-section-shadow: none;
  --theme-card-bg: var(--app-surface);
  --theme-card-border: 1px solid var(--app-border);
  --theme-card-padding: var(--bf-space-4);
  --theme-card-shadow: none;

  --theme-card-heading-font: var(--bf-font-display);
  --theme-card-heading-size: 11px;
  --theme-card-heading-weight: var(--bf-font-weight-semibold);
  --theme-card-heading-color: var(--app-link);
  --theme-card-heading-transform: uppercase;
  --theme-card-heading-tracking: 2px;

  --theme-tabs-bg: var(--app-surface);
  --theme-tab-size: var(--bf-text-sm);
  --theme-tab-weight: var(--bf-font-weight-regular);
  --theme-tab-active-color: var(--app-link);
  --theme-tab-marker: 3px;

  --theme-appbar-position: sticky;
  --theme-appbar-bg: var(--app-bg);
  --theme-appbar-layer: 40;
}

@media (max-width: 640px) {
  :root {
    --theme-page-padding-block: var(--bf-space-4) var(--bf-space-8);
    --theme-block-gap: var(--bf-space-4);
    --theme-page-title-size: var(--bf-text-lg);
  }
}