/* ─────────────────────────────────────────────────────────────
   pipguard Design System — MkDocs Material CSS overrides
   Design source of truth: DESIGN.md
   ───────────────────────────────────────────────────────────── */

/* ─── Fonts ─── */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,700;0,9..144,900;1,9..144,700&family=Geist:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500;700&display=swap');

/* ─── Dark Mode Palette (#0D0D08 warm near-black) ─── */
[data-md-color-scheme="slate"] {
  --md-default-bg-color:          #0D0D08;
  --md-default-fg-color:          #F0EDE0;
  --md-default-fg-color--light:   #9B9A90;
  --md-default-fg-color--lighter: #5C5B50;
  --md-default-fg-color--lightest:#2A2D25;

  --md-primary-fg-color:          #C8FF00;
  --md-primary-fg-color--light:   rgba(200, 255, 0, 0.15);
  --md-primary-fg-color--dark:    #a0cc00;
  --md-primary-bg-color:          #F0EDE0;

  --md-accent-fg-color:           #C8FF00;
  --md-accent-fg-color--transparent: rgba(200, 255, 0, 0.1);

  --md-code-bg-color:             #1A1A12;
  --md-code-fg-color:             #F0EDE0;

  --md-typeset-a-color:           #C8FF00;

  /* Surface */
  --pg-surface:   #1A1A12;
  --pg-surface2:  #242418;
  --pg-border:    #2A2D25;
  --pg-text:      #F0EDE0;
  --pg-muted:     #5C5B50;
  --pg-muted2:    #9B9A90;
  --pg-accent:    #C8FF00;
  --pg-success:   #39FF14;
  --pg-warning:   #FF8C00;
  --pg-error:     #FF1744;
  --pg-info:      #00B4D8;

  /* Admonition overrides */
  --md-admonition-bg-color:       #1A1A12;
}

/* ─── Light Mode Palette ─── */
[data-md-color-scheme="default"] {
  --md-default-bg-color:          #F5F3E8;
  --md-default-fg-color:          #1A1A12;
  --md-default-fg-color--light:   #6B6A5C;
  --md-default-fg-color--lighter: #CECAB8;
  --md-default-fg-color--lightest:#E0DDCE;

  --md-primary-fg-color:          #5A8200;
  --md-primary-fg-color--light:   rgba(90,130,0,0.12);
  --md-primary-fg-color--dark:    #3d5900;
  --md-primary-bg-color:          #1A1A12;

  --md-accent-fg-color:           #5A8200;
  --md-accent-fg-color--transparent: rgba(90,130,0,0.1);

  --md-code-bg-color:             #ECEADE;
  --md-code-fg-color:             #1A1A12;

  --md-typeset-a-color:           #5A8200;

  --pg-surface:   #ECEADE;
  --pg-border:    #CECAB8;
  --pg-accent:    #5A8200;
  --pg-success:   #16A34A;
  --pg-warning:   #EA580C;
  --pg-error:     #DC2626;
  --pg-info:      #0284C7;
}

/* ─── Typography ─── */
body,
.md-typeset {
  font-family: 'Geist', system-ui, -apple-system, sans-serif;
  font-size: 15px;
  line-height: 1.65;
}

.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4 {
  font-family: 'Fraunces', Georgia, serif;
  letter-spacing: -0.025em;
  line-height: 1.15;
}

.md-typeset h1 {
  font-weight: 900;
  font-size: 2.4em;
  color: var(--md-default-fg-color);
}

.md-typeset h2 {
  font-weight: 700;
  font-size: 1.65em;
  border-bottom: 1px solid var(--pg-border);
  padding-bottom: 0.35em;
}

.md-typeset h3 {
  font-weight: 700;
  font-size: 1.2em;
}

code,
.md-typeset code,
.md-typeset pre,
.md-typeset kbd {
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 0.85em;
}

/* ─── Nav / Header ─── */
.md-header {
  background-color: #0D0D08;
  border-bottom: 1px solid var(--pg-border, #2A2D25);
  box-shadow: none;
}

[data-md-color-scheme="default"] .md-header {
  background-color: #F5F3E8;
  border-bottom: 1px solid var(--pg-border, #CECAB8);
}

/* Header buttons (logo, search, palette toggle, etc.) */
.md-header__button,
.md-header__button.md-icon {
  color: #F0EDE0;
}
.md-header__button:hover,
.md-header__button.md-icon:hover {
  color: #C8FF00;
  opacity: 1;
}
[data-md-color-scheme="default"] .md-header__button,
[data-md-color-scheme="default"] .md-header__button.md-icon {
  color: #1A1A12;
}
[data-md-color-scheme="default"] .md-header__button:hover,
[data-md-color-scheme="default"] .md-header__button.md-icon:hover {
  color: #5A8200;
  opacity: 1;
}

.md-header__title {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  letter-spacing: 0.05em;
  font-weight: 700;
}

/* ─── Tabs ─── */
.md-tabs {
  background-color: #0D0D08;
  border-bottom: 1px solid var(--pg-border, #2A2D25);
}

[data-md-color-scheme="default"] .md-tabs {
  background-color: #F5F3E8;
}

/* Tab links */
.md-tabs__link {
  color: var(--md-default-fg-color--light);
  opacity: 1;
}

.md-tabs__link:hover,
.md-tabs__link--active {
  color: var(--pg-accent) !important;
  opacity: 1;
}

[data-md-color-scheme="default"] .md-tabs__link {
  color: #6B6A5C;
}

[data-md-color-scheme="default"] .md-tabs__link:hover,
[data-md-color-scheme="default"] .md-tabs__link--active {
  color: #5A8200 !important;
}

/* ─── Sidebar ─── */
.md-sidebar__scrollwrap {
  background: var(--md-default-bg-color);
}

.md-nav__item--active > .md-nav__link,
.md-nav__link:hover {
  color: var(--pg-accent) !important;
}

/* ─── Content area ─── */
.md-content__inner {
  padding-top: 2rem;
}

/* ─── Code blocks ─── */
.highlight,
.md-typeset pre {
  background-color: var(--md-code-bg-color) !important;
  border: 1px solid var(--pg-border, #2A2D25);
  border-radius: 4px;
}

.md-typeset .highlight span.filename {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  background: var(--pg-surface2, #242418);
  border-bottom: 1px solid var(--pg-border, #2A2D25);
  color: var(--md-default-fg-color--light);
}

/* Copy button */
.md-clipboard {
  color: var(--pg-muted, #5C5B50);
}
.md-clipboard:hover {
  color: var(--pg-accent) !important;
}

/* ─── Inline code ─── */
.md-typeset :not(pre) > code {
  background-color: var(--md-code-bg-color);
  border: 1px solid var(--pg-border, #2A2D25);
  border-radius: 3px;
  padding: 0.1em 0.4em;
  color: var(--pg-accent);
  font-weight: 500;
}

[data-md-color-scheme="default"] .md-typeset :not(pre) > code {
  color: var(--pg-accent);
}

/* ─── Admonitions → mapped to risk levels ─── */

/* note → info */
.md-typeset .admonition.note,
.md-typeset details.note {
  border-color: var(--pg-info);
}
.md-typeset .admonition.note > .admonition-title,
.md-typeset details.note > summary {
  background-color: rgba(0, 180, 216, 0.08);
  color: var(--pg-info);
}

/* warning → HIGH */
.md-typeset .admonition.warning,
.md-typeset details.warning {
  border-color: var(--pg-warning);
}
.md-typeset .admonition.warning > .admonition-title,
.md-typeset details.warning > summary {
  background-color: rgba(255, 140, 0, 0.08);
  color: var(--pg-warning);
}

/* danger / critical */
.md-typeset .admonition.danger,
.md-typeset details.danger {
  border-color: var(--pg-error);
}
.md-typeset .admonition.danger > .admonition-title,
.md-typeset details.danger > summary {
  background-color: rgba(255, 23, 68, 0.08);
  color: var(--pg-error);
}

/* success / tip */
.md-typeset .admonition.tip,
.md-typeset details.tip {
  border-color: var(--pg-success);
}
.md-typeset .admonition.tip > .admonition-title,
.md-typeset details.tip > summary {
  background-color: rgba(57, 255, 20, 0.07);
  color: var(--pg-success);
}

/* General admonition base */
.md-typeset .admonition,
.md-typeset details {
  background-color: var(--pg-surface, #1A1A12);
  border-radius: 4px;
  font-size: 0.875em;
}

/* ─── Tables ─── */
.md-typeset table:not([class]) {
  font-size: 0.85em;
  border: 1px solid var(--pg-border, #2A2D25);
  border-radius: 4px;
  overflow: hidden;
}

.md-typeset table:not([class]) th {
  background-color: var(--pg-surface2, #242418);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--md-default-fg-color--light);
  border-bottom: 1px solid var(--pg-border, #2A2D25);
}

.md-typeset table:not([class]) tr:nth-child(even) {
  background-color: var(--pg-surface, #1A1A12);
}

.md-typeset table:not([class]) td {
  border-color: var(--pg-border, #2A2D25);
}

/* ─── Badges / risk labels ─── */
.pg-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 2px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  vertical-align: middle;
}
.pg-badge-critical { background: rgba(255,23,68,0.15);  color: var(--pg-error);   }
.pg-badge-high     { background: rgba(255,140,0,0.15);  color: var(--pg-warning); }
.pg-badge-medium   { background: rgba(255,220,0,0.12);  color: #FFD700;           }
.pg-badge-clean    { background: rgba(57,255,20,0.12);  color: var(--pg-success); }
.pg-badge-blocked  { background: var(--pg-error);       color: #fff;              }

/* ─── Hero section (index.md) ─── */
.pg-hero {
  padding: 56px 0 64px;
  border-bottom: 1px solid var(--pg-border, #2A2D25);
  margin-bottom: 40px;
}

.pg-hero__eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--md-default-fg-color--light);
  margin-bottom: 20px;
}

.pg-hero__headline {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 900;
  font-size: clamp(48px, 6vw, 80px);
  letter-spacing: -0.03em;
  line-height: 1.05;
  margin-bottom: 24px;
  color: var(--md-default-fg-color);
}

.pg-hero__headline .pg-accent {
  color: var(--pg-accent);
}

.pg-hero__sub {
  font-family: 'Geist', sans-serif;
  font-size: 17px;
  color: var(--md-default-fg-color--light);
  max-width: 540px;
  line-height: 1.7;
  margin-bottom: 32px;
}

.pg-hero__facts {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 36px;
}

.pg-hero__fact {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--md-default-fg-color--light);
  display: flex;
  align-items: center;
  gap: 6px;
}

.pg-hero__fact::before {
  content: '✓';
  color: var(--pg-accent);
  font-weight: 700;
}

.pg-cta-group {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 48px;
}

.pg-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 22px;
  border-radius: 3px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.06em;
  font-weight: 700;
  text-decoration: none !important;
  transition: all 0.15s;
  cursor: pointer;
  border: 1px solid transparent;
}

.pg-btn-primary {
  background: var(--pg-accent);
  color: #0D0D08 !important;
  border-color: var(--pg-accent);
}

.pg-btn-primary:hover {
  background: #d4ff1a;
  border-color: #d4ff1a;
}

.pg-btn-secondary {
  background: transparent;
  color: var(--md-default-fg-color) !important;
  border-color: var(--pg-border, #2A2D25);
}

.pg-btn-secondary:hover {
  border-color: var(--md-default-fg-color--light);
}

/* ─── Terminal window ─── */
.pg-terminal {
  background: var(--pg-surface, #1A1A12);
  border: 1px solid var(--pg-border, #2A2D25);
  border-radius: 6px;
  overflow: hidden;
  margin: 28px 0;
  box-shadow: 0 8px 40px rgba(0,0,0,0.4);
}

.pg-terminal__bar {
  background: var(--pg-surface2, #242418);
  border-bottom: 1px solid var(--pg-border, #2A2D25);
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.pg-terminal__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.pg-terminal__dot:nth-child(1) { background: #FF5F57; }
.pg-terminal__dot:nth-child(2) { background: #FFBD2E; }
.pg-terminal__dot:nth-child(3) { background: #28CA41; }

.pg-terminal__title {
  margin-left: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--md-default-fg-color--light);
  letter-spacing: 0.05em;
}

.pg-terminal__body {
  padding: 20px 24px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  line-height: 1.75;
  overflow-x: auto;
}

.t-dollar  { color: var(--pg-accent); margin-right: 8px; }
.t-cmd     { color: var(--md-default-fg-color); }
.t-ok      { color: var(--pg-success); }
.t-warn    { color: var(--pg-warning); }
.t-block   { color: var(--pg-error); font-weight: 700; }
.t-muted   { color: var(--md-default-fg-color--light); }
.t-accent  { color: var(--pg-accent); font-weight: 700; }
.t-dim     { color: var(--pg-muted, #5C5B50); }

/* ─── How it works steps ─── */
.pg-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1px;
  background: var(--pg-border, #2A2D25);
  border: 1px solid var(--pg-border, #2A2D25);
  border-radius: 6px;
  overflow: hidden;
  margin: 28px 0;
}

.pg-step {
  background: var(--md-default-bg-color);
  padding: 24px 20px;
}

.pg-step__num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--pg-accent);
  margin-bottom: 8px;
}

.pg-step__title {
  font-family: 'Geist', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--md-default-fg-color);
  margin-bottom: 6px;
}

.pg-step__desc {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--md-default-fg-color--light);
  line-height: 1.5;
}

/* ─── Footer ─── */
.md-footer {
  background-color: var(--pg-surface, #1A1A12);
  border-top: 1px solid var(--pg-border, #2A2D25);
  color: var(--md-default-fg-color);
  /* Override Material's footer color variables */
  --md-footer-fg-color:          var(--md-default-fg-color);
  --md-footer-fg-color--light:   var(--md-default-fg-color--light);
  --md-footer-fg-color--lighter: var(--md-default-fg-color--lighter);
}

.md-footer-meta {
  background-color: var(--md-default-bg-color);
  border-top: 1px solid var(--pg-border, #2A2D25);
  color: var(--md-default-fg-color--light);
}

/* Ensure footer links and text are always visible */
.md-footer a,
.md-footer__title,
.md-footer__direction,
.md-footer-meta__inner,
.md-footer-copyright {
  color: var(--md-default-fg-color--light) !important;
}

.md-footer a:hover {
  color: var(--pg-accent) !important;
}

/* Footer nav buttons */
.md-footer__button.md-icon {
  color: var(--md-default-fg-color) !important;
}

[data-md-color-scheme="default"] .md-footer {
  background-color: var(--pg-surface, #ECEADE);
}

[data-md-color-scheme="default"] .md-footer-meta {
  background-color: var(--md-default-bg-color);
}

/* ─── Scrollbar ─── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--md-default-bg-color); }
::-webkit-scrollbar-thumb { background: var(--pg-border, #2A2D25); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--pg-muted, #5C5B50); }

/* ─── Search ─── */
.md-search__form {
  background-color: var(--pg-surface, #1A1A12) !important;
  border: 1px solid var(--pg-border, #2A2D25);
}

/* ─── Responsive ─── */
@media (max-width: 768px) {
  .pg-hero__headline { font-size: 42px; }
  .pg-steps { grid-template-columns: 1fr; }
}