/* ============================================================
   Momentum lightBronzeWebex — DCS demo shared theme.
   Token set + base + components, lifted 1:1 from Pipelet's
   pipelet-theme.css so the static landing, the OPS cockpit and the
   inherited Pipelet portals all render in the SAME design system.
   Self-hosted fonts (GDPR-safe) under /dcs-branding/fonts/.
   ============================================================ */

/* ---- Fonts (self-hosted, served at /dcs-branding/fonts/) ---- */
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('/dcs-branding/fonts/inter-400.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('/dcs-branding/fonts/inter-500.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('/dcs-branding/fonts/inter-600.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url('/dcs-branding/fonts/inter-700.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:800;font-display:swap;src:url('/dcs-branding/fonts/inter-800.woff2') format('woff2')}
@font-face{font-family:'Source Serif 4';font-style:normal;font-weight:300;font-display:swap;src:url('/dcs-branding/fonts/source-serif-4-300.ttf') format('truetype')}
@font-face{font-family:'Source Serif 4';font-style:normal;font-weight:400;font-display:swap;src:url('/dcs-branding/fonts/source-serif-4-400.ttf') format('truetype')}
@font-face{font-family:'Source Serif 4';font-style:normal;font-weight:500;font-display:swap;src:url('/dcs-branding/fonts/source-serif-4-500.ttf') format('truetype')}
@font-face{font-family:'Source Serif 4';font-style:normal;font-weight:700;font-display:swap;src:url('/dcs-branding/fonts/source-serif-4-700.ttf') format('truetype')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/dcs-branding/fonts/jetbrains-mono-400.woff2') format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url('/dcs-branding/fonts/jetbrains-mono-500.woff2') format('woff2')}

:root{
  --gray-5:#f7f7f7; --gray-10:#ededed; --gray-20:#dedede; --gray-50:#8f8f8f;

  --bg-solid:#ffffff; --bg-secondary:#f7f7f7; --bg-tertiary:#ededed;
  --bg-gradient:linear-gradient(180deg,#f5efe4 0%,#ffffff 100%);
  --bg-gradient-sub:linear-gradient(180deg,#fcfaf4 0%,#ffffff 100%);
  --bg-surface:#ffffff; --bg-surface-hover:rgba(0,0,0,.03); --bg-surface-active:rgba(0,0,0,.06);
  --bg-glass:rgba(255,255,255,.82);

  --text-primary:rgba(0,0,0,.95); --text-secondary:rgba(0,0,0,.70); --text-disabled:rgba(0,0,0,.40);

  --accent:#1170cf; --accent-hover:#0353a8; --accent-muted:rgba(17,112,207,.08);
  --positive:#1d805f; --positive-muted:#cef5eb; --negative:#db1f2e;
  --warning:#a65e00; --warning-muted:rgba(166,94,0,.10);

  --border-subtle:rgba(0,0,0,.08); --border-normal:rgba(0,0,0,.13); --border-hover:rgba(0,0,0,.20);

  --elevation-1:0 1px 3px rgba(0,0,0,.06),0 1px 2px rgba(0,0,0,.04);
  --elevation-2:0 4px 12px rgba(0,0,0,.08);
  --elevation-3:0 8px 24px rgba(0,0,0,.10);

  --font-serif:"Source Serif 4",Georgia,"Times New Roman",serif;
  --font-sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,Menlo,monospace;

  --text-xs:11px; --text-sm:13px; --text-base:14px; --text-md:15px; --text-lg:17px;
  --text-xl:20px; --text-2xl:28px; --text-3xl:36px; --text-4xl:48px;

  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px;
  --sp-6:24px; --sp-7:32px; --sp-8:40px; --sp-9:48px; --sp-10:64px;

  --radius-xs:4px; --radius-sm:6px; --radius-md:8px; --radius-lg:12px; --radius-pill:9999px;
  --ease:cubic-bezier(.16,1,.3,1); --dur-fast:120ms; --dur-norm:180ms;
  color-scheme:light;
}

/* ---- Base ---- */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--font-sans); font-size:var(--text-base); line-height:1.6;
  color:var(--text-primary); background:var(--bg-gradient) fixed;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:var(--font-serif); font-weight:700; letter-spacing:-.01em; color:var(--text-primary)}
a{color:var(--accent); text-decoration:none}
a:hover{color:var(--accent-hover); text-decoration:underline}
code,pre,.mono{font-family:var(--font-mono)}

/* ---- Momentum buttons (pill) ---- */
.m-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--sp-2);
  font-family:var(--font-sans); font-size:var(--text-base); font-weight:600;
  padding:10px 22px; border-radius:var(--radius-pill); border:1px solid transparent;
  cursor:pointer; text-decoration:none; transition:background var(--dur-fast) var(--ease),
  box-shadow var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); line-height:1;
}
.m-btn-primary{background:var(--accent); color:#fff}
.m-btn-primary:hover{background:var(--accent-hover); color:#fff; text-decoration:none}
.m-btn-secondary{background:var(--bg-surface); color:var(--text-primary); border-color:var(--border-normal)}
.m-btn-secondary:hover{background:var(--bg-surface-hover); border-color:var(--border-hover); text-decoration:none}
.m-btn-ghost{background:transparent; color:var(--accent)}
.m-btn-ghost:hover{background:var(--accent-muted); text-decoration:none}

/* ---- Card ---- */
.m-card{
  background:var(--bg-surface); border:1px solid var(--border-subtle);
  border-radius:var(--radius-lg); padding:var(--sp-6); box-shadow:var(--elevation-1);
}
.m-card-hover{transition:transform var(--dur-norm) var(--ease),box-shadow var(--dur-norm) var(--ease),border-color var(--dur-norm) var(--ease)}
.m-card-hover:hover{transform:translateY(-3px); box-shadow:var(--elevation-2); border-color:var(--border-hover)}

/* ---- Badge / pill ---- */
.m-badge{display:inline-block; padding:3px 10px; border-radius:var(--radius-pill);
  font-size:var(--text-xs); font-weight:700; letter-spacing:.03em; text-transform:uppercase}
.m-badge-accent{background:var(--accent-muted); color:var(--accent)}
.m-badge-positive{background:var(--positive-muted); color:var(--positive)}
.m-badge-warning{background:var(--warning-muted); color:var(--warning)}
.m-badge-negative{background:rgba(219,31,46,.10); color:var(--negative)}

/* ---- Table ---- */
.m-table{width:100%; border-collapse:collapse; font-size:var(--text-sm)}
.m-table th,.m-table td{text-align:left; padding:10px 12px; border-bottom:1px solid var(--border-subtle)}
.m-table th{font-size:var(--text-xs); font-weight:600; color:var(--text-secondary);
  text-transform:uppercase; letter-spacing:.04em}

/* ---- Kicker / eyebrow ---- */
.m-kicker{display:inline-block; background:var(--accent-muted); color:var(--accent);
  padding:6px 14px; border-radius:var(--radius-pill); font-size:var(--text-xs);
  font-weight:700; letter-spacing:.10em; text-transform:uppercase}