@layer skin {
/*
 * The red/yellow contract: these fallbacks are a deliberate last-resort
 * alarm, not styling. They only fire when NO ancestor skin supplies the
 * variable (delta skins inherit long before this), i.e. when something
 * structural broke: an incomplete root skin or a half-shipped deploy.
 * If you ever see red/yellow in the frontend, fix the token tree —
 * never silence the alarm by editing these lines.
 */
[data-skin] {
    background-color: var(--skin-background-primary, red);
    color: var(--skin-foreground-primary, yellow);
    border-color: var(--skin-border-primary, red);

    *:focus-visible {
      outline-style: solid;
      outline-width: var(--sem-focus-outline-width);
      outline-offset: var(--sem-focus-outline-offset);
      outline-color: var(--skin-accent-primary, red);
    }

    a {
      color: var(--skin-interactive-primary, red);
    }

    a:hover,
    a:focus-visible {
      color: var(--skin-interactive-primary-hover, yellow);
    }
  }

}