/*
 * Tigera Labs theme — shared core stylesheet.
 *
 * Loaded ONCE per surface from the theme Secret as `tigera-theme-core.css`
 * (served at /static/workshops/theme/, /static/theme/, or
 * /workshop/static/theme/ depending on which surface is the parent).
 * Each surface's HTML file links to it via <link rel="stylesheet">.
 *
 * Mirrors the architecture of `tigera-theme-core.js`: one canonical
 * shared file, three thin per-surface companion files for surface-
 * specific tweaks. CSS custom properties defined here cascade into
 * the per-surface stylesheets via :root inheritance regardless of
 * load order, so this file is safe to load before OR after the
 * per-surface bundle.
 *
 * Contents:
 *   1. Light-mode design tokens (--surface*, --on-surface*, --tigera-*, --doc-*)
 *   2. Dark-mode token overrides (html[data-theme="dark"] block)
 *   3. Self-hosted @font-face declarations (DM Sans + JetBrains Mono)
 *   4. Slack support widget styles (#tigera-slack-help)
 *
 * The font URLs are relative — they resolve against the CSS file's
 * own URL, so this file works correctly whether it's served from the
 * portal, dashboard, or instructions prefix without any per-surface
 * substitution.
 */

/*
 * Tigera Labs theme — light-mode tokens.
 *
 * Single source of truth for every colour / typography / geometry
 * variable. Concatenated into every per-surface bundle by apply-theme.sh.
 *
 * Naming convention:
 *   --surface*       neutral surfaces (body, cards, code blocks, dividers)
 *   --on-surface*    foreground colours that sit on those surfaces
 *   --tigera-*       brand literals (orange gradient, Tigera Black, etc.)
 *   --doc-*          aliases used by workshop-instructions.css. They
 *                    resolve through var() chains so dark-mode flips on
 *                    the underlying tokens propagate automatically — no
 *                    need to redeclare them in dark mode.
 */

:root {
  /* Brand */
  --tigera-orange-start: #FAA51B;
  --tigera-orange-end:   #E76D2B;
  --tigera-black:        #231F1F;
  --tigera-white:        #FFFFFF;
  --tigera-brown:        #A7754A;
  --link-blue:           #1084BD;
  --slate:               #757F9D;

  /* Light surfaces (body) */
  --surface:           #FBF7F1;       /* warm cream body */
  --surface-alt:       #F4EFE6;       /* deeper cream — sections, inline code */
  --surface-elevated:  #F8F2E8;       /* slightly cooler — code blocks inside cards */
  --surface-card:      #FFFFFF;       /* cards / modals — pure white pop */
  --surface-mercury:   #E5E5E5;       /* hairline borders / dividers */

  /* Dark anchor surfaces — used by navbar + footer regardless of theme */
  --surface-dark-start: #454444;
  --surface-dark-end:   #231F1F;

  /* Foreground */
  --on-surface:        #231F1F;
  --on-surface-muted:  #5a6573;
  --on-surface-soft:   #475569;
  --on-surface-subtle: #94a3b8;
  --on-dark:           #FFFFFF;
  --on-dark-muted:     #d1d5db;

  /* --doc-* aliases for workshop-instructions surface. Resolving via
     var() chain means dark-mode overrides on --surface / --on-surface
     "just work" without having to redeclare every alias. */
  --doc-bg:           var(--surface);
  --doc-bg-alt:       var(--surface-alt);
  --doc-bg-elevated:  var(--surface-elevated);
  --doc-bg-card:      var(--surface-card);
  --doc-fg:           var(--on-surface);
  --doc-muted:        var(--on-surface-muted);
  --doc-soft:         var(--on-surface-soft);
  --doc-link:         var(--link-blue);
  --doc-accent:       var(--tigera-orange-end);
  --doc-mercury:      var(--surface-mercury);
  --doc-radius:       var(--radius);

  /* Callouts (light-mode pastel backgrounds + accent rules) */
  --doc-callout-info-bg:    #eff6ff;
  --doc-callout-warn-bg:    #fffbeb;
  --doc-callout-danger-bg:  #fef2f2;
  --doc-callout-info:       #1084BD;
  --doc-callout-warn:       #d97706;
  --doc-callout-danger:     #dc2626;
  --doc-callout-success:    #059669;

  /* Type */
  --font-sans: 'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', SFMono-Regular, Menlo, Consolas, monospace;

  /* Geometry */
  --radius:       5px;
  --radius-card:  8px;
  --radius-pill:  999px;

  /* Shadow */
  --shadow-soft: 0 4px 20px rgba(35, 31, 31, 0.08);
  --shadow-lift: 0 12px 30px rgba(35, 31, 31, 0.12);
}

/*
 * Tigera Labs theme — dark-mode flips.
 *
 * Activated by setting `data-theme="dark"` on <html>. Only the
 * neutral surfaces / foregrounds / callouts shift; the orange brand
 * gradient and the dark navbar+footer anchors stay the same in both
 * modes.
 *
 * --doc-* aliases are NOT redeclared here — they resolve via the
 * var() chain in _tokens.css, so changing --surface here flows
 * through to --doc-bg automatically.
 *
 * The same overrides are duplicated inside a `prefers-color-scheme: dark`
 * media query below so the workshop-instructions iframe — whose core
 * JS only runs at end-of-body and therefore can't set data-theme
 * before first paint — still paints dark when the OS prefers dark.
 * Guarded by :root:not([data-theme="light"]) so an explicit cookie /
 * localStorage choice of light still wins over OS preference.
 */

html[data-theme="dark"] {
  /* Neutral surfaces */
  --surface:           #1a1a1e;
  --surface-alt:       #232328;
  --surface-elevated:  #16161a;       /* deeper than card — code blocks pop on dark */
  --surface-card:      #2a2a2e;
  --surface-mercury:   #3a3a3f;

  /* Foreground */
  --on-surface:        #e9e0e0;
  --on-surface-muted:  #94a3b8;
  --on-surface-soft:   #cbd5e1;
  --on-surface-subtle: #6b7280;

  /* Brighter cerulean for legibility on dark surfaces */
  --link-blue: #5dade2;

  /* Callouts — deep tints + brighter accent rules */
  --doc-callout-info-bg:    #11253a;
  --doc-callout-warn-bg:    #2d2310;
  --doc-callout-danger-bg:  #321414;
  --doc-callout-info:       #5dade2;
  --doc-callout-warn:       #fbbf24;
  --doc-callout-danger:     #f87171;
  --doc-callout-success:    #34d399;

  /* Shadows — deepen because surface is dark */
  --shadow-soft: 0 4px 20px rgba(0, 0, 0, 0.50);
  --shadow-lift: 0 12px 30px rgba(0, 0, 0, 0.65);
}

/* OS-preference-driven dark fallback so the workshop-instructions
   iframe (where the theme JS only runs at end-of-body) paints dark
   on first paint when the user's OS prefers dark. The
   :not([data-theme="light"]) guard preserves explicit user choice. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --surface:           #1a1a1e;
    --surface-alt:       #232328;
    --surface-elevated:  #16161a;
    --surface-card:      #2a2a2e;
    --surface-mercury:   #3a3a3f;

    --on-surface:        #e9e0e0;
    --on-surface-muted:  #94a3b8;
    --on-surface-soft:   #cbd5e1;
    --on-surface-subtle: #6b7280;

    --link-blue: #5dade2;

    --doc-callout-info-bg:    #11253a;
    --doc-callout-warn-bg:    #2d2310;
    --doc-callout-danger-bg:  #321414;
    --doc-callout-info:       #5dade2;
    --doc-callout-warn:       #fbbf24;
    --doc-callout-danger:     #f87171;
    --doc-callout-success:    #34d399;

    --shadow-soft: 0 4px 20px rgba(0, 0, 0, 0.50);
    --shadow-lift: 0 12px 30px rgba(0, 0, 0, 0.65);
  }
}

/*
 * Tigera Labs theme — self-hosted font @font-face declarations.
 *
 * Bundled in the same theme Secret. The portal CSP is `font-src 'self';
 * style-src 'self'`, so external Google Fonts are blocked — these have
 * to be served from the same origin.
 *
 * `` is replaced per-surface by apply-theme.sh:
 *   training-portal       /static/workshops/theme/
 *   workshop-dashboard    /static/theme/
 *   workshop-instructions /workshop/static/theme/
 *
 * DM Sans + JetBrains Mono are variable fonts — a single .woff2 covers
 * every weight we use (DM Sans 400/500/700/900, JetBrains Mono 400/500),
 * declared via `font-weight: 100 1000` / `100 800` ranges.
 */

@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 100 1000;
  font-display: swap;
  src: url('DMSans-latin.woff2') format('woff2');
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url('JetBrainsMono-latin.woff2') format('woff2');
}

/*
 * Floating "Need help? Join our Slack" CTA. Concatenated into every
 * per-surface CSS bundle by apply-theme.sh so it loads through the
 * external stylesheet path (CSP-safe — runtime-injected <style> blocks
 * get dropped by the portal's strict style-src).
 *
 * The element is created at runtime by TigeraTheme.injectSlackHelp().
 */

#tigera-slack-help {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 2147483600;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 10px 10px 14px;
  background: linear-gradient(135deg, #FAA51B 0%, #E76D2B 100%);
  color: #fff;
  border: 0;
  border-radius: var(--radius, 5px);
  box-shadow: 0 4px 20px rgba(35, 31, 31, 0.18);
  font-family: var(--font-sans, 'DM Sans', system-ui, sans-serif);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.01em;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: right 0.25s ease, bottom 0.3s ease, filter 0.15s ease, transform 0.15s ease;
}

/* When the footer scrolls into the viewport, JS sets --footer-clearance
   to footerHeight + 20px and adds this class so the button hops above
   the footer instead of overlapping it. */
#tigera-slack-help.tigera-slack-help-above-footer {
  bottom: var(--footer-clearance, 20px);
}

#tigera-slack-help:hover,
#tigera-slack-help:focus {
  filter: brightness(1.05);
  transform: translateY(-1px);
  color: #fff;
  text-decoration: none;
  outline: none;
}

#tigera-slack-help .tigera-slack-help-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  display: block;
}

#tigera-slack-help .tigera-slack-help-label {
  white-space: nowrap;
}

#tigera-slack-help .tigera-slack-help-dismiss {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  margin-left: 6px;
  padding: 0;
  background: rgba(35, 31, 31, 0.22);
  color: #fff;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  font: 700 13px/1 inherit;
  transition: background 0.15s ease;
}

#tigera-slack-help .tigera-slack-help-dismiss:hover,
#tigera-slack-help .tigera-slack-help-dismiss:focus {
  background: rgba(35, 31, 31, 0.4);
  outline: none;
}

/* Peek/tab treatment — applied either when the user has minimized the
   button (.tigera-slack-help-minimized) OR when the viewport is too
   narrow for the full pill (@media). Rules duplicated because CSS
   can't OR a media query into a selector list. Both states render
   identically: the full Slack icon stays visible, with the rest of
   the pill tucked behind the right edge so it reads as a tab. */

#tigera-slack-help.tigera-slack-help-minimized {
  right: -10px;
  padding: 10px 14px 10px 8px;
  border-radius: var(--radius, 5px) 0 0 var(--radius, 5px);
}

#tigera-slack-help.tigera-slack-help-minimized .tigera-slack-help-label,
#tigera-slack-help.tigera-slack-help-minimized .tigera-slack-help-dismiss {
  display: none;
}

@media (max-width: 540px) {
  #tigera-slack-help {
    right: -10px;
    padding: 10px 14px 10px 8px;
    border-radius: var(--radius, 5px) 0 0 var(--radius, 5px);
  }

  #tigera-slack-help .tigera-slack-help-label,
  #tigera-slack-help .tigera-slack-help-dismiss {
    display: none;
  }
}