/*
  Skunkworks Academy theme conformance layer
  Version: 2026.08.23.2

  Loaded by the canonical Academy shell after the design system and brand
  bridge. This layer standardises the Academy canvas, semantic tokens and
  reusable components across every public document.
*/

:root {
  --swa-theme-contract-version: "2026.08.23.2";
  --swa-font-sans: var(--sk-font-sans, "IBM Plex Sans", Inter, system-ui, sans-serif);
  --swa-font-mono: var(--sk-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  --swa-content-max: var(--sk-container, 1200px);
  --swa-control-height: 2.75rem;
  --swa-radius-control: var(--sk-radius-sm, .5rem);
  --swa-radius-surface: var(--sk-radius-md, 1rem);
  --swa-space-control-x: var(--sk-space-05, 1rem);
  --swa-space-control-y: var(--sk-space-03, .5rem);
  --swa-surface: var(--sk-layer-01);
  --swa-surface-raised: var(--sk-layer-02);
  --swa-text: var(--sk-text-primary);
  --swa-text-muted: var(--sk-text-secondary);
  --swa-border: var(--sk-border-subtle);
  --swa-action: var(--sk-interactive);
  --swa-action-hover: var(--sk-interactive-hover);
  --swa-action-text: var(--sk-text-on-color);
  --swa-link: var(--sk-link);
  --swa-focus: var(--sk-focus);
  --swa-shadow: var(--sk-shadow);
}

/* The shell writes both attributes for explicit preferences. Supporting both
   keeps direct page loads, the footer selector and future properties aligned. */
:root[data-theme="dark"],
:root[data-swa-theme="dark"],
[data-theme="dark"],
[data-swa-theme="dark"] {
  --swa-surface: var(--sk-layer-01);
  --swa-surface-raised: var(--sk-layer-02);
  --swa-text: var(--sk-text-primary);
  --swa-text-muted: var(--sk-text-secondary);
  --swa-border: var(--sk-border-subtle);
  --swa-link: var(--sk-link);
  --swa-focus: var(--sk-focus);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-swa-theme="light"]) {
    --swa-surface: var(--sk-layer-01);
    --swa-surface-raised: var(--sk-layer-02);
    --swa-text: var(--sk-text-primary);
    --swa-text-muted: var(--sk-text-secondary);
    --swa-border: var(--sk-border-subtle);
    --swa-link: var(--sk-link);
    --swa-focus: var(--sk-focus);
  }
}

/* Academy-wide foundation
   -------------------------------------------------------------------------
   Every public page receives the same canvas, typography, colour tokens and
   common content surfaces. Legacy pages may retain their layout and content,
   but cannot replace the Academy palette through local CSS variables.

   A deliberately explicit escape hatch is available only for self-contained
   embedded applications: data-swa-theme-scope="isolated". The governance
   audit requires a reason for every use of that escape hatch. */
html {
  background: var(--sk-bg);
}

body:not([data-swa-theme-scope="isolated"]) {
  background: var(--sk-bg-gradient) !important;
  color: var(--sk-text-primary) !important;
  font-family: var(--swa-font-sans) !important;
  text-rendering: optimizeLegibility;
  --bg: var(--sk-bg) !important;
  --panel: var(--sk-layer-01) !important;
  --surface: var(--sk-layer-01) !important;
  --surface-2: var(--sk-layer-02) !important;
  --surface2: var(--sk-layer-02) !important;
  --surface-3: var(--sk-layer-03) !important;
  --surface3: var(--sk-layer-03) !important;
  --text: var(--sk-text-primary) !important;
  --text-color: var(--sk-text-primary) !important;
  --muted: var(--sk-text-secondary) !important;
  --muted-color: var(--sk-text-secondary) !important;
  --line: var(--sk-border-subtle) !important;
  --border-color: var(--sk-border-subtle) !important;
  --accent: var(--sk-interactive) !important;
  --accent2: var(--sk-brand-ink) !important;
  --primary: var(--sk-interactive) !important;
  --link: var(--sk-link) !important;
  --focus: var(--sk-focus) !important;
  --warning: var(--sk-focus) !important;
  --shadow: var(--sk-shadow) !important;
}

body:not([data-swa-theme-scope="isolated"]) :where(main, [role="main"], .site-main) {
  color: var(--sk-text-primary);
  font-family: var(--swa-font-sans);
}

body:not([data-swa-theme-scope="isolated"]) :where(main, [role="main"], .site-main) :where(a:not(.btn):not(.button):not(.sk-button):not(.swa-button):not([data-sk-component="button"])) {
  color: var(--sk-link) !important;
  text-decoration-thickness: .08em;
  text-underline-offset: .14em;
}

body:not([data-swa-theme-scope="isolated"]) :where(main, [role="main"], .site-main) :where(.card, .panel, .tile, .surface, .box, [data-sk-component="card"]) {
  background: var(--sk-layer-01) !important;
  border-color: var(--sk-border-subtle) !important;
  box-shadow: var(--sk-shadow-sm) !important;
  color: var(--sk-text-primary) !important;
}

/* Legacy hero normalisation deliberately excludes the canonical component.
   .sk-hero owns its dark surface, typography and CTA contrast as one unit. */
body:not([data-swa-theme-scope="isolated"]) :where(main, [role="main"], .site-main) :where(.hero, [class~="hero"]):not(.sk-hero):not([data-sk-component="hero"]) {
  background: var(--sk-bg-gradient) !important;
  border-color: var(--sk-border-subtle);
}

body:not([data-swa-theme-scope="isolated"]) :where(main, [role="main"], .site-main) :where(.btn, .button, .sk-button, .swa-button, [data-sk-component="button"]) {
  border-color: var(--sk-interactive) !important;
  font-family: var(--swa-font-sans) !important;
}

body:not([data-swa-theme-scope="isolated"]) :where(main, [role="main"], .site-main) :where(.btn.primary, .button.primary, .sk-button--primary, .swa-button--primary, [data-sk-component="button"][data-variant="primary"]) {
  background: var(--sk-interactive) !important;
  color: var(--sk-text-on-color) !important;
}

body:not([data-swa-theme-scope="isolated"]) :where(main, [role="main"], .site-main) :where(.btn:not(.primary), .button:not(.primary), .sk-button--secondary, .swa-button--secondary, [data-sk-component="button"][data-variant="secondary"]) {
  background: var(--sk-layer-01) !important;
  color: var(--sk-interactive) !important;
}

/* Canonical hero CTAs use the component palette, not the light-surface
   normalisation above. Keep this rule here because this stylesheet is loaded
   after the design system on legacy pages. */
body:not([data-swa-theme-scope="isolated"]) :where(main, [role="main"], .site-main) [data-sk-component="hero"] :where(.sk-button, [data-sk-component="button"]) {
  border-color: var(--sk-border-inverse) !important;
  background: transparent !important;
  color: var(--sk-text-inverse) !important;
}

body:not([data-swa-theme-scope="isolated"]) :where(main, [role="main"], .site-main) [data-sk-component="hero"] :where(.sk-button--primary, [data-sk-component="button"][data-variant="primary"]) {
  border-color: var(--sk-interactive) !important;
  background: var(--sk-interactive) !important;
  color: var(--sk-text-on-color) !important;
}

body:not([data-swa-theme-scope="isolated"]) :where(main, [role="main"], .site-main) [data-sk-component="hero"] :where(.sk-button--primary, [data-sk-component="button"][data-variant="primary"]):hover {
  border-color: var(--sk-interactive-hover) !important;
  background: var(--sk-interactive-hover) !important;
}

body:not([data-swa-theme-scope="isolated"]) :where(main, [role="main"], .site-main) [data-sk-component="hero"] :where(.sk-button--secondary, [data-sk-component="button"][data-variant="secondary"]):hover {
  border-color: #fff !important;
  background: color-mix(in srgb, #fff 12%, transparent) !important;
  color: #fff !important;
}

body:not([data-swa-theme-scope="isolated"]) :where(main, [role="main"], .site-main) :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea) {
  background: var(--sk-layer-01) !important;
  border-color: var(--sk-border-subtle) !important;
  color: var(--sk-text-primary) !important;
  font-family: var(--swa-font-sans) !important;
}

body:not([data-swa-theme-scope="isolated"]) :where(main, [role="main"], .site-main) :where(input, select, textarea)::placeholder {
  color: var(--sk-text-muted) !important;
  opacity: 1;
}

/* Use these classes, or the matching data-sk-component value, for new public
   content. They deliberately do not target generic framework classes. */
:where(.sk-button, .swa-button, [data-sk-component="button"]) {
  align-items: center;
  border: 1px solid var(--swa-action);
  border-radius: var(--swa-radius-control);
  box-sizing: border-box;
  display: inline-flex;
  font: 600 .9375rem/1.2 var(--swa-font-sans);
  gap: var(--sk-space-03, .5rem);
  justify-content: center;
  min-height: var(--swa-control-height);
  padding: var(--swa-space-control-y) var(--swa-space-control-x);
  text-decoration: none;
  transition: background-color var(--sk-transition, 160ms ease), border-color var(--sk-transition, 160ms ease), box-shadow var(--sk-transition, 160ms ease), color var(--sk-transition, 160ms ease), transform var(--sk-transition, 160ms ease);
}

:where(.sk-button--primary, .swa-button--primary, [data-sk-component="button"][data-variant="primary"]) {
  background: var(--swa-action);
  color: var(--swa-action-text);
}

:where(.sk-button--primary, .swa-button--primary, [data-sk-component="button"][data-variant="primary"]):hover {
  background: var(--swa-action-hover);
  border-color: var(--swa-action-hover);
  color: var(--swa-action-text);
  text-decoration: none;
}

:where(.sk-button--secondary, .swa-button--secondary, [data-sk-component="button"][data-variant="secondary"]) {
  background: var(--swa-surface);
  color: var(--swa-action);
}

:where(.sk-button--secondary, .swa-button--secondary, [data-sk-component="button"][data-variant="secondary"]):hover {
  background: var(--swa-surface-raised);
  border-color: var(--swa-action-hover);
  color: var(--swa-action-hover);
  text-decoration: none;
}

:where(.sk-card, .swa-card, [data-sk-component="card"]) {
  background: var(--swa-surface);
  border: 1px solid var(--swa-border);
  border-radius: var(--swa-radius-surface);
  box-shadow: var(--swa-shadow);
  color: var(--swa-text);
}

:where(.sk-field, .swa-field, [data-sk-component="field"]) :is(input, select, textarea) {
  background: var(--swa-surface);
  border: 1px solid var(--swa-border);
  border-radius: var(--swa-radius-control);
  box-sizing: border-box;
  color: var(--swa-text);
  font: 400 1rem/1.45 var(--swa-font-sans);
  min-height: var(--swa-control-height);
  padding: var(--swa-space-control-y) var(--swa-space-control-x);
  width: 100%;
}

:where(.sk-field, .swa-field, [data-sk-component="field"]) :is(input, select, textarea)::placeholder {
  color: var(--swa-text-muted);
  opacity: 1;
}

:where(.sk-button, .swa-button, [data-sk-component="button"], .sk-field, .swa-field, [data-sk-component="field"]) :focus-visible,
:where(.sk-button, .swa-button, [data-sk-component="button"]):focus-visible {
  outline: 3px solid var(--swa-focus);
  outline-offset: 3px;
}

:where(.sk-notice, .swa-notice, [data-sk-component="notice"]) {
  border-inline-start: .25rem solid var(--swa-action);
  color: var(--swa-text);
  padding: var(--sk-space-05, 1rem);
}

:where(.sk-prose, .swa-prose, [data-sk-component="prose"]) {
  color: var(--swa-text);
  font-family: var(--swa-font-sans);
}

:where(.sk-prose, .swa-prose, [data-sk-component="prose"]) :is(a:not(.sk-button):not(.swa-button):not([data-sk-component="button"])) {
  color: var(--swa-link);
  text-decoration-thickness: .08em;
  text-underline-offset: .14em;
}

@media (prefers-reduced-motion: reduce) {
  :where(.sk-button, .swa-button, [data-sk-component="button"]) {
    transition: none;
  }
}