/* CMBOT theme — the ONE place where this app decides how Web Awesome looks.

   Web Awesome ships `wa-theme-default` + the default palette; this file only overrides design tokens,
   inside the library's own highest cascade layer (`wa-theme-overrides`), exactly as the library documents.
   Nothing here targets a component's internals: a component that needs a different look gets a token, a
   variant/appearance, or a `::part()` rule in components.css — never `!important`.

   Colour scheme is a class on <html> (`wa-dark` | `wa-light`, set by appearance.js). The app is neutral
   grey: brand = the gray hue (`wa-brand-gray` on <html>); status colours keep their meaning.
   Story artwork (the 1080×1920 canvas, templates, fonts of a story) never reads these tokens. */

@layer wa-theme-overrides {
  :root, .wa-light, .wa-dark {
    /* Type — Poppins is bundled in /static/fonts; code stays on the system mono. */
    --wa-font-family-body: "Poppins", ui-sans-serif, -apple-system, "Segoe UI", Roboto, sans-serif;
    --wa-font-family-heading: var(--wa-font-family-body);
    --wa-font-family-code: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
    --wa-font-weight-semibold: 500;
    --wa-font-weight-bold: 600;

    /* Shape & rhythm knobs — change these, never a component. */
    --wa-border-radius-scale: 1.25;
    --wa-space-scale: 1;
    --wa-shadow-blur-scale: 1.5;

    /* Dense tooling UI: controls and focus ring a touch tighter than the marketing defaults. */
    --wa-form-control-background-color: var(--wa-color-surface-lowered);
    --wa-form-control-border-color: var(--wa-color-surface-border);
    --wa-form-control-padding-block: 0.7em;
    --wa-form-control-padding-inline: 0.85em;
    --wa-form-control-border-radius: var(--wa-border-radius-m);
    --wa-focus-ring-width: 2px;
    --wa-focus-ring-offset: 2px;
    --wa-panel-border-radius: var(--wa-border-radius-l);
  }

  /* Light: the primary action is the darkest neutral — ink on paper. */
  :root, .wa-light {
    --wa-color-brand-fill-loud: var(--wa-color-brand-10);
    --wa-color-brand-border-loud: var(--wa-color-brand-10);
    --wa-color-brand-on-loud: var(--wa-color-brand-95);
    --wa-color-text-link: var(--wa-color-neutral-10);
    --wa-color-focus: var(--wa-color-neutral-40);
  }

  /* Dark: the primary action is the lightest neutral. */
  .wa-dark {
    --wa-color-brand-fill-loud: var(--wa-color-brand-90);
    --wa-color-brand-border-loud: var(--wa-color-brand-90);
    --wa-color-brand-on-loud: var(--wa-color-brand-05);
    --wa-color-text-link: var(--wa-color-neutral-90);
    --wa-color-focus: var(--wa-color-neutral-70);
  }
}