/* ═══════════════════════════════════════════════════════════
   Nishanth Konsultancy Shared Theme
   Extracted from the current Digital Sovereignty Assessment UI.

   Purpose:
   - Shared base theme for nishanthkonsultancy.com and readiness.nishanthkonsultancy.com
   - Works on top of MkDocs Material without requiring a custom theme package
   - Keeps the existing dark, technical, assessment-style visual identity
   ═══════════════════════════════════════════════════════════ */

:root {
  /* Legacy tokens from the current DSA codebase */
  --bg:       #0f1117;
  --bg2:      #161b27;
  --bg3:      #1e2535;
  --bg4:      #252d40;
  --border:   #2a3448;
  --border2:  #334060;
  --purple:   #7c5cbf;
  --purple-l: #9b7dd4;
  --pp:       rgba(124, 92, 191, .15);
  --pg:       rgba(124, 92, 191, .3);
  --text:     #e8eaf0;
  --text2:    #9aa3b8;
  --text3:    #5c677d;
  --green:    #22c55e;
  --gp:       rgba(34, 197, 94, .12);
  --amber:    #f59e0b;
  --ap:       rgba(245, 158, 11, .12);
  --red:      #ef4444;
  --rp:       rgba(239, 68, 68, .12);
  --blue:     #3b82f6;
  --bp:       rgba(59, 130, 246, .12);
  --r:        6px;
  --rl:       10px;

  /* NK semantic tokens */
  --nk-bg: var(--bg);
  --nk-surface: var(--bg2);
  --nk-surface-2: var(--bg3);
  --nk-surface-3: var(--bg4);
  --nk-border: var(--border);
  --nk-border-strong: var(--border2);
  --nk-accent: var(--purple);
  --nk-accent-soft: var(--purple-l);
  --nk-accent-panel: var(--pp);
  --nk-text: var(--text);
  --nk-muted: var(--text2);
  --nk-faint: var(--text3);
  --nk-success: var(--green);
  --nk-warning: var(--amber);
  --nk-danger: var(--red);
  --nk-info: var(--blue);
  --nk-radius: var(--r);
  --nk-radius-lg: var(--rl);
  --nk-max-width: 1200px;

  /* MkDocs Material color bridge */
  --md-primary-fg-color: #0f1117;
  --md-primary-bg-color: #e8eaf0;
  --md-accent-fg-color: var(--nk-accent-soft);
  --md-default-bg-color: var(--nk-bg);
  --md-default-fg-color: var(--nk-text);
  --md-default-fg-color--light: var(--nk-muted);
  --md-typeset-color: var(--nk-text);
  --md-typeset-a-color: var(--nk-accent-soft);
  --md-code-bg-color: var(--nk-surface-2);
  --md-code-fg-color: var(--nk-text);
}

/* Base MkDocs refinements */
html { scroll-behavior: smooth; }
body {
  background:
    radial-gradient(circle at 25% 0%, rgba(124, 92, 191, .12), transparent 28rem),
    linear-gradient(180deg, var(--nk-bg), #0b0d13 70%);
  color: var(--nk-text);
}

.md-container,
.md-main,
.md-main__inner,
.md-content,
.md-content__inner {
  background: transparent;
}

.md-header,
.md-tabs {
  background: rgba(15, 17, 23, .92);
  border-bottom: 1px solid var(--nk-border);
  backdrop-filter: blur(14px);
}

.md-header__title,
.md-tabs__link,
.md-nav__title,
.md-nav__link {
  color: var(--nk-text);
}

.md-nav__link--active,
.md-tabs__link--active,
.md-typeset a {
  color: var(--nk-accent-soft);
}

.md-typeset {
  font-size: .72rem;
  line-height: 1.7;
}

.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4 {
  color: #fff;
  font-weight: 850;
  letter-spacing: -.02em;
}

.md-typeset h1 {
  font-size: clamp(2rem, 5vw, 3.25rem);
  line-height: 1.05;
  margin: 0 0 .7rem;
}

.md-typeset h2 {
  margin-top: 2.2rem;
  border-bottom: 1px solid var(--nk-border);
  padding-bottom: .45rem;
}

.md-typeset p,
.md-typeset li {
  color: var(--nk-muted);
}

.md-typeset strong { color: var(--nk-text); }

.md-typeset hr {
  border-bottom: 1px solid var(--nk-border);
}

.md-typeset table:not([class]) {
  background: var(--nk-surface);
  border: 1px solid var(--nk-border);
  border-radius: var(--nk-radius-lg);
  overflow: hidden;
}

.md-typeset table:not([class]) th {
  background: var(--nk-surface-2);
  color: var(--nk-text);
  border-color: var(--nk-border);
}

.md-typeset table:not([class]) td {
  border-color: var(--nk-border);
  color: var(--nk-muted);
}

.md-typeset code {
  background: var(--nk-surface-2);
  color: var(--nk-text);
  border: 1px solid var(--nk-border);
  border-radius: 4px;
}

.md-typeset pre > code {
  border: 1px solid var(--nk-border);
  border-radius: var(--nk-radius-lg);
}

/* Common layout helpers */
.nk-container {
  max-width: var(--nk-max-width);
  margin: 0 auto;
  padding: 0 1.2rem;
}

.nk-section {
  padding: 3rem 0;
}

.nk-section--surface {
  background: var(--nk-surface);
  border-top: 1px solid var(--nk-border);
  border-bottom: 1px solid var(--nk-border);
}

.nk-muted { color: var(--nk-muted) !important; }
.nk-faint { color: var(--nk-faint) !important; }
.nk-accent { color: var(--nk-accent-soft) !important; }
.nk-success { color: var(--nk-success) !important; }
.nk-warning { color: var(--nk-warning) !important; }
.nk-danger { color: var(--nk-danger) !important; }

/* Buttons: use both NK names and current legacy aliases */
.nk-button,
.btn-p,
.btn-o,
.md-typeset .md-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  min-height: 2.25rem;
  padding: .55rem 1.15rem;
  border-radius: 999px;
  font-size: .68rem;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: all .2s ease;
}

.nk-button--primary,
.btn-p,
.md-typeset .md-button--primary {
  background: var(--nk-accent);
  color: #fff !important;
  border: 1px solid var(--nk-accent);
}

.nk-button--primary:hover,
.btn-p:hover,
.md-typeset .md-button--primary:hover {
  background: var(--nk-accent-soft);
  border-color: var(--nk-accent-soft);
  transform: translateY(-1px);
  box-shadow: 0 8px 24px var(--pg);
}

.nk-button--outline,
.btn-o,
.md-typeset .md-button:not(.md-button--primary) {
  background: transparent;
  color: var(--nk-muted) !important;
  border: 1px solid var(--nk-border-strong);
}

.nk-button--outline:hover,
.btn-o:hover,
.md-typeset .md-button:not(.md-button--primary):hover {
  color: var(--nk-text) !important;
  border-color: var(--nk-muted);
  background: rgba(255, 255, 255, .02);
}

/* Forms */
input,
select,
textarea,
.md-typeset input,
.md-typeset select,
.md-typeset textarea {
  background: var(--nk-surface-3);
  color: var(--nk-text);
  border: 1px solid var(--nk-border);
  border-radius: var(--nk-radius);
  padding: .55rem .65rem;
  outline: none;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--nk-accent);
  box-shadow: 0 0 0 3px var(--nk-accent-panel);
}

::selection {
  background: rgba(124, 92, 191, .35);
  color: #fff;
}

@media (max-width: 760px) {
  .md-typeset h1 { font-size: 2rem; }
  .nk-container { padding: 0 .9rem; }
  .nk-section { padding: 2.2rem 0; }
}