/*
  Skunkworks Academy canonical brand theme
  Version: 2026.08.22.2

  Source palette:
  Ink Navy      #03033A
  Skunk Blue    #1E6BD0
  Signal Orange #F24208
  White         #FFFFFF
  Off White     #F7F9FC
  Graphite      #15171A
  Steel Gray    #D8DEE8
  Slate Text    #5A6472

  This file is intentionally loaded after the shared design system so legacy
  pages inherit the current brand palette without requiring page-by-page CSS
  rewrites. It remaps semantic tokens rather than flattening authored layouts.
*/

:root {
  --sw-ink-navy: #03033a;
  --sw-skunk-blue: #1e6bd0;
  --sw-skunk-blue-hover: #1756a9;
  --sw-signal-orange: #f24208;
  --sw-white: #ffffff;
  --sw-off-white: #f7f9fc;
  --sw-graphite: #15171a;
  --sw-steel-gray: #d8dee8;
  --sw-slate-text: #5a6472;
  --sw-blue-on-dark: #8fbaff;
  --sw-dark-canvas: #05050b;
  --sw-dark-surface: #11111c;
  --sw-dark-text: #f4f6fa;
  --sw-dark-muted: #c8d1df;

  /* Shared design-system bridge */
  --sk-brand-black: var(--sw-ink-navy);
  --sk-brand-ink: var(--sw-graphite);
  --sk-brand-blue: var(--sw-skunk-blue);
  --sk-brand-blue-hover: var(--sw-skunk-blue-hover);
  --sk-brand-cyan: var(--sw-skunk-blue);
  --sk-brand-purple: var(--sw-ink-navy);
  --sk-bg: var(--sw-white);
  --sk-bg-gradient:
    radial-gradient(circle at 0 0, rgba(30, 107, 208, .08), transparent 30rem),
    linear-gradient(180deg, var(--sw-white), var(--sw-off-white));
  --sk-layer-01: var(--sw-white);
  --sk-layer-02: var(--sw-off-white);
  --sk-layer-03: #edf1f7;
  --sk-layer-inverse: var(--sw-ink-navy);
  --sk-text-primary: var(--sw-graphite);
  --sk-text-secondary: var(--sw-slate-text);
  --sk-text-muted: #687385;
  --sk-text-on-color: var(--sw-white);
  --sk-text-inverse: var(--sw-white);
  --sk-interactive: var(--sw-skunk-blue);
  --sk-interactive-hover: var(--sw-skunk-blue-hover);
  --sk-link: #1756a9;
  --sk-focus: var(--sw-signal-orange);
  --sk-border-subtle: var(--sw-steel-gray);
  --sk-border-strong: #8b95a5;
  --sk-border-inverse: rgba(255, 255, 255, .20);
  --sk-shadow-sm: 0 8px 24px rgba(3, 3, 58, .08);
  --sk-shadow: 0 18px 48px rgba(3, 3, 58, .10);
  --sk-shadow-strong: 0 30px 90px rgba(3, 3, 58, .18);

  /* Common legacy token bridge used across jobs, security, IBM, media, etc. */
  --bg: var(--sw-white);
  --surface: var(--sw-white);
  --surface-2: var(--sw-off-white);
  --surface2: var(--sw-off-white);
  --surface-3: #edf1f7;
  --surface3: #edf1f7;
  --panel: var(--sw-white);
  --panel-2: var(--sw-off-white);
  --text: var(--sw-graphite);
  --text-soft: #343a43;
  --muted: var(--sw-slate-text);
  --subtle: #687385;
  --soft: var(--sw-off-white);
  --line: var(--sw-steel-gray);
  --line-strong: #8b95a5;
  --accent: var(--sw-skunk-blue);
  --accent-2: var(--sw-ink-navy);
  --accent2: var(--sw-ink-navy);
  --primary: var(--sw-skunk-blue);
  --primary-color: var(--sw-skunk-blue);
  --accent-color: var(--sw-skunk-blue);
  --link: #1756a9;
  --focus: var(--sw-signal-orange);
  --amber: var(--sw-signal-orange);
  --warning: var(--sw-signal-orange);
  --bg-color: var(--sw-white);
  --card-bg: var(--sw-white);
  --text-color: var(--sw-graphite);
  --muted-color: var(--sw-slate-text);
  --border-color: var(--sw-steel-gray);
  --stat-number: var(--sw-skunk-blue);
  --stat-label: var(--sw-slate-text);

  /* Labs namespace bridge. */
  --labs-bg: var(--sw-white);
  --labs-bg-soft: var(--sw-off-white);
  --labs-surface: var(--sw-white);
  --labs-surface-2: var(--sw-off-white);
  --labs-card: rgba(255, 255, 255, .94);
  --labs-text: var(--sw-graphite);
  --labs-muted: var(--sw-slate-text);
  --labs-line: rgba(90, 100, 114, .24);
  --labs-blue: var(--sw-skunk-blue);
  --labs-cyan: var(--sw-skunk-blue);
  --labs-violet: var(--sw-ink-navy);
  --labs-amber: var(--sw-signal-orange);
  --labs-focus: 0 0 0 4px rgba(242, 66, 8, .24);
}

:root[data-theme="dark"],
[data-theme="dark"] {
  color-scheme: dark;
  --sk-bg: var(--sw-dark-canvas);
  --sk-bg-gradient:
    radial-gradient(circle at 8% -8%, rgba(30, 107, 208, .22), transparent 34rem),
    radial-gradient(circle at 92% 6%, rgba(242, 66, 8, .07), transparent 28rem),
    linear-gradient(180deg, var(--sw-dark-canvas), var(--sw-ink-navy));
  --sk-layer-01: var(--sw-dark-surface);
  --sk-layer-02: #171728;
  --sk-layer-03: #23233a;
  --sk-layer-inverse: var(--sw-white);
  --sk-text-primary: var(--sw-dark-text);
  --sk-text-secondary: var(--sw-dark-muted);
  --sk-text-muted: #aeb9c9;
  --sk-text-inverse: var(--sw-graphite);
  --sk-link: var(--sw-blue-on-dark);
  --sk-focus: var(--sw-signal-orange);
  --sk-border-subtle: rgba(216, 222, 232, .18);
  --sk-border-strong: rgba(216, 222, 232, .34);
  --sk-shadow-sm: 0 8px 24px rgba(0, 0, 0, .28);
  --sk-shadow: 0 20px 60px rgba(0, 0, 0, .36);
  --sk-shadow-strong: 0 30px 90px rgba(0, 0, 0, .48);

  /* Common dark legacy bridge. */
  --bg: var(--sw-dark-canvas);
  --surface: var(--sw-dark-surface);
  --surface-2: #171728;
  --surface2: #171728;
  --surface-3: #23233a;
  --surface3: #23233a;
  --panel: var(--sw-dark-surface);
  --panel-2: #171728;
  --text: var(--sw-dark-text);
  --text-soft: #e5e9f0;
  --muted: var(--sw-dark-muted);
  --subtle: #aeb9c9;
  --soft: #171728;
  --line: rgba(216, 222, 232, .20);
  --line-strong: rgba(216, 222, 232, .38);
  --accent: var(--sw-skunk-blue);
  --accent-2: var(--sw-ink-navy);
  --accent2: var(--sw-ink-navy);
  --primary: var(--sw-skunk-blue);
  --link: var(--sw-blue-on-dark);
  --focus: var(--sw-signal-orange);
  --amber: var(--sw-signal-orange);

  /* Labs dark bridge. */
  --labs-bg: var(--sw-dark-canvas);
  --labs-bg-soft: var(--sw-ink-navy);
  --labs-surface: var(--sw-dark-surface);
  --labs-surface-2: #171728;
  --labs-card: rgba(17, 17, 28, .90);
  --labs-text: var(--sw-dark-text);
  --labs-muted: var(--sw-dark-muted);
  --labs-line: rgba(216, 222, 232, .20);
  --labs-blue: var(--sw-skunk-blue);
  --labs-cyan: var(--sw-blue-on-dark);
  --labs-violet: var(--sw-ink-navy);
  --labs-amber: var(--sw-signal-orange);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --sk-bg: var(--sw-dark-canvas);
    --sk-bg-gradient:
      radial-gradient(circle at 8% -8%, rgba(30, 107, 208, .22), transparent 34rem),
      radial-gradient(circle at 92% 6%, rgba(242, 66, 8, .07), transparent 28rem),
      linear-gradient(180deg, var(--sw-dark-canvas), var(--sw-ink-navy));
    --sk-layer-01: var(--sw-dark-surface);
    --sk-layer-02: #171728;
    --sk-layer-03: #23233a;
    --sk-layer-inverse: var(--sw-white);
    --sk-text-primary: var(--sw-dark-text);
    --sk-text-secondary: var(--sw-dark-muted);
    --sk-text-muted: #aeb9c9;
    --sk-text-inverse: var(--sw-graphite);
    --sk-link: var(--sw-blue-on-dark);
    --sk-focus: var(--sw-signal-orange);
    --sk-border-subtle: rgba(216, 222, 232, .18);
    --sk-border-strong: rgba(216, 222, 232, .34);

    --bg: var(--sw-dark-canvas);
    --surface: var(--sw-dark-surface);
    --surface-2: #171728;
    --surface2: #171728;
    --surface-3: #23233a;
    --surface3: #23233a;
    --panel: var(--sw-dark-surface);
    --panel-2: #171728;
    --text: var(--sw-dark-text);
    --text-soft: #e5e9f0;
    --muted: var(--sw-dark-muted);
    --subtle: #aeb9c9;
    --soft: #171728;
    --line: rgba(216, 222, 232, .20);
    --line-strong: rgba(216, 222, 232, .38);
    --accent: var(--sw-skunk-blue);
    --accent-2: var(--sw-ink-navy);
    --accent2: var(--sw-ink-navy);
    --primary: var(--sw-skunk-blue);
    --link: var(--sw-blue-on-dark);
    --focus: var(--sw-signal-orange);
    --amber: var(--sw-signal-orange);

    --labs-bg: var(--sw-dark-canvas);
    --labs-bg-soft: var(--sw-ink-navy);
    --labs-surface: var(--sw-dark-surface);
    --labs-surface-2: #171728;
    --labs-card: rgba(17, 17, 28, .90);
    --labs-text: var(--sw-dark-text);
    --labs-muted: var(--sw-dark-muted);
    --labs-line: rgba(216, 222, 232, .20);
    --labs-blue: var(--sw-skunk-blue);
    --labs-cyan: var(--sw-blue-on-dark);
    --labs-violet: var(--sw-ink-navy);
    --labs-amber: var(--sw-signal-orange);
  }
}

/* Shared shell: neutral surfaces, blue active states, restrained orange focus. */
.swa-global-nav,
.sk-site-header {
  border-color: var(--sk-border-subtle);
}

.swa-global-nav__link:hover,
.swa-global-nav__link:focus,
.swa-global-nav__link[aria-current="page"],
.sk-nav a:hover,
.sk-nav a[aria-current="page"] {
  background: color-mix(in srgb, var(--sw-skunk-blue) 10%, transparent);
  border-color: color-mix(in srgb, var(--sw-skunk-blue) 26%, var(--sk-border-subtle));
}

.sk-hero {
  background:
    radial-gradient(circle at 82% 12%, rgba(30, 107, 208, .30), transparent 30rem),
    linear-gradient(135deg, var(--sw-ink-navy), #0b174d 62%, var(--sw-ink-navy));
}

/* Primary actions stay Skunk Blue. Orange is reserved for emphasis/focus. */
.sk-button--primary,
.btn.primary,
.button.primary,
.primary-button,
.cta-primary {
  background-color: var(--sw-skunk-blue);
  border-color: var(--sw-skunk-blue);
  color: var(--sw-white);
}

.sk-button--primary:hover,
.btn.primary:hover,
.button.primary:hover,
.primary-button:hover,
.cta-primary:hover {
  background-color: var(--sw-skunk-blue-hover);
  border-color: var(--sw-skunk-blue-hover);
}

/* Legacy gradient buttons become canonical blue rather than purple/cyan or red/orange. */
.btn.primary,
.button.primary {
  background-image: linear-gradient(135deg, var(--sw-skunk-blue), var(--sw-skunk-blue-hover));
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline-color: var(--sw-signal-orange);
}

::selection {
  background: color-mix(in srgb, var(--sw-skunk-blue) 28%, transparent);
  color: inherit;
}