/* ============================================================
   SKIC Playground Docs — Dark-first, Sharp, Technical Theme
   Stack: Docusaurus + Tailwind (preflight off) + shadcn/ui (New York / Zinc)
   Design: no rounded corners, Vercel/Linear aesthetic
   ============================================================ */

@tailwind base;
@tailwind components;
@tailwind utilities;

/* --- Fonts --- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
@import url('https://cdn.jsdelivr.net/npm/geist@1.3.0/dist/fonts/geist-sans/style.css');
@import url('https://cdn.jsdelivr.net/npm/geist@1.3.0/dist/fonts/geist-mono/style.css');

/* ── shadcn/ui CSS variables (New York / Zinc, radius = 0) ── */
@layer base {
  :root {
    --background:   0 0% 100%;
    --foreground:   240 10% 3.9%;
    --card:         0 0% 100%;
    --card-foreground: 240 10% 3.9%;
    --popover:      0 0% 100%;
    --popover-foreground: 240 10% 3.9%;
    --primary:      240 5.9% 10%;
    --primary-foreground: 0 0% 98%;
    --secondary:    240 4.8% 95.9%;
    --secondary-foreground: 240 5.9% 10%;
    --muted:        240 4.8% 95.9%;
    --muted-foreground: 240 3.8% 46.1%;
    --accent:       240 4.8% 95.9%;
    --accent-foreground: 240 5.9% 10%;
    --destructive:  0 84.2% 60.2%;
    --destructive-foreground: 0 0% 98%;
    --border:       240 5.9% 90%;
    --input:        240 5.9% 90%;
    --ring:         240 5.9% 10%;
    --radius:       0rem;    /* SHARP — no rounded corners */
    /* brand accent */
    --skic-accent:  239 84% 67%;
    --skic-green:   160 84% 39%;
    --skic-amber:   38 92% 50%;
    --skic-red:     0 84% 60%;
  }

  .dark {
    --background:   240 10% 3.9%;
    --foreground:   0 0% 98%;
    --card:         240 10% 3.9%;
    --card-foreground: 0 0% 98%;
    --popover:      240 10% 3.9%;
    --popover-foreground: 0 0% 98%;
    --primary:      0 0% 98%;
    --primary-foreground: 240 5.9% 10%;
    --secondary:    240 3.7% 15.9%;
    --secondary-foreground: 0 0% 98%;
    --muted:        240 3.7% 15.9%;
    --muted-foreground: 240 5% 64.9%;
    --accent:       240 3.7% 15.9%;
    --accent-foreground: 0 0% 98%;
    --destructive:  0 62.8% 30.6%;
    --destructive-foreground: 0 0% 98%;
    --border:       240 3.7% 15.9%;
    --input:        240 3.7% 15.9%;
    --ring:         240 4.9% 83.9%;
    --radius:       0rem;
  }
}

/* ── Docusaurus / Infima token overrides ─────────────────── */
:root {
  --ifm-color-primary:          #6366f1;
  --ifm-color-primary-dark:     #4f46e5;
  --ifm-color-primary-darker:   #4338ca;
  --ifm-color-primary-darkest:  #3730a3;
  --ifm-color-primary-light:    #818cf8;
  --ifm-color-primary-lighter:  #a5b4fc;
  --ifm-color-primary-lightest: #c7d2fe;

  --ifm-font-family-base:       'Geist', 'Inter', system-ui, sans-serif;
  --ifm-font-family-monospace:  'Geist Mono', 'Fira Code', monospace;
  --ifm-font-size-base:         15px;
  --ifm-line-height-base:       1.7;

  --ifm-heading-font-weight:    600;
  --ifm-heading-letter-spacing: -0.02em;
  --ifm-h1-font-size:           2.25rem;
  --ifm-h2-font-size:           1.5rem;
  --ifm-h3-font-size:           1.2rem;

  --ifm-navbar-height:          56px;
  --ifm-navbar-shadow:          none;
  --ifm-navbar-background-color: #0a0a0a;

  /* SHARP — zero radius everywhere */
  --ifm-global-radius:          0;
  --ifm-code-border-radius:     0;
  --ifm-pre-border-radius:      0;
  --ifm-alert-border-radius:    0;
  --ifm-card-border-radius:     0;
  --ifm-button-border-radius:   0;
  --ifm-pagination-nav-border-radius: 0;
  --ifm-badge-border-radius:    0;
  --ifm-toc-border-color:       #1f1f1f;
  --ifm-code-font-size:         0.85rem;
  --ifm-pre-padding:            1.25rem;

  --docusaurus-highlighted-code-line-bg: rgba(99, 102, 241, 0.08);
}

/* Dark mode Infima overrides */
[data-theme='dark'] {
  --ifm-color-primary:          #818cf8;
  --ifm-color-primary-dark:     #6366f1;
  --ifm-color-primary-darker:   #4f46e5;
  --ifm-color-primary-darkest:  #4338ca;
  --ifm-color-primary-light:    #a5b4fc;
  --ifm-color-primary-lighter:  #c7d2fe;
  --ifm-color-primary-lightest: #e0e7ff;

  --ifm-background-color:             #0a0a0a;
  --ifm-background-surface-color:     #111111;
  --ifm-navbar-background-color:      #0a0a0a;
  --ifm-sidebar-background:           #0a0a0a;
  --ifm-footer-background-color:      #0a0a0a;

  --ifm-color-content:                #ededed;
  --ifm-color-content-secondary:      #a1a1a1;
  --ifm-color-emphasis-100:           #161616;
  --ifm-color-emphasis-200:           #1f1f1f;
  --ifm-color-emphasis-300:           #2a2a2a;
  --ifm-color-emphasis-400:           #444444;
  --ifm-color-emphasis-600:           #888888;
  --ifm-color-emphasis-700:           #cccccc;
  --ifm-color-emphasis-900:           #ffffff;

  --ifm-hr-border-color:              #1f1f1f;
  --ifm-code-background:              #161616;
  --ifm-pre-background:               #111111;

  --docusaurus-highlighted-code-line-bg: rgba(129, 140, 248, 0.12);
}

/* ── Force dark navbar in BOTH modes ─────────────────────── */
/* This is the key fix — lock navbar dark regardless of color scheme */
.navbar {
  background-color: #0a0a0a !important;
  border-bottom: 1px solid #1f1f1f !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: none !important;
}

.navbar__title {
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: -0.02em;
  color: #ededed !important;
}

.navbar__link {
  font-size: 0.875rem;
  font-weight: 500;
  color: #a1a1a1 !important;
  transition: color 0.12s ease;
  border-radius: 0 !important;
}

.navbar__link:hover,
.navbar__link--active {
  color: #ededed !important;
  background: transparent !important;
}

.navbar__logo { height: 22px; }

.navbar-sidebar {
  background-color: #0a0a0a !important;
}

.navbar-sidebar__brand {
  background-color: #0a0a0a !important;
  border-bottom: 1px solid #1f1f1f !important;
}

/* ── Typography ──────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  letter-spacing: -0.02em;
}

h2 {
  border-bottom: 1px solid var(--ifm-color-emphasis-200);
  padding-bottom: 0.35rem;
}

/* ── Sidebar ─────────────────────────────────────────────── */
.theme-doc-sidebar-container {
  border-right: 1px solid #1f1f1f !important;
}

[data-theme='dark'] .theme-doc-sidebar-container {
  background-color: #0a0a0a;
}

.menu__link {
  font-size: 0.875rem;
  border-radius: 0 !important;
  padding: 0.3rem 0.75rem;
  color: var(--ifm-color-content-secondary);
  transition: all 0.12s ease;
}

.menu__link:hover {
  background: var(--ifm-color-emphasis-100);
  color: var(--ifm-color-content);
}

.menu__link--active {
  background: var(--ifm-color-emphasis-100) !important;
  color: var(--ifm-color-primary) !important;
  font-weight: 600;
  border-left: 2px solid var(--ifm-color-primary);
}

.menu__caret { border-radius: 0 !important; }

/* ── Code blocks ─────────────────────────────────────────── */
code {
  font-size: 0.84em;
  border: 1px solid var(--ifm-color-emphasis-200);
  background: var(--ifm-color-emphasis-100);
  border-radius: 0 !important;
}

.prism-code {
  font-size: 0.84rem;
  line-height: 1.6;
  border-radius: 0 !important;
}

div[class*='codeBlockContainer'] {
  border: 1px solid var(--ifm-color-emphasis-200);
  box-shadow: none !important;
  border-radius: 0 !important;
}

div[class*='codeBlockTitle'] {
  background: var(--ifm-color-emphasis-100);
  border-bottom: 1px solid var(--ifm-color-emphasis-200);
  font-size: 0.78rem;
  font-family: var(--ifm-font-family-monospace);
  color: var(--ifm-color-content-secondary);
  border-radius: 0 !important;
}

div[class*='copyButton'],
div[class*='codeButton'] {
  border-radius: 0 !important;
}

/* ── Tables ──────────────────────────────────────────────── */
table {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.875rem;
  border: 1px solid var(--ifm-color-emphasis-200);
  border-radius: 0 !important;
  overflow: hidden;
}

thead { background: var(--ifm-color-emphasis-100); }

th {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ifm-color-content-secondary);
  padding: 0.65rem 1rem;
  border-bottom: 1px solid var(--ifm-color-emphasis-200);
}

td {
  padding: 0.65rem 1rem;
  border-bottom: 1px solid var(--ifm-color-emphasis-100);
}

tr:last-child td { border-bottom: none; }

tbody tr:hover { background: var(--ifm-color-emphasis-100); }

/* ── Admonitions ─────────────────────────────────────────── */
.admonition {
  border-radius: 0 !important;
  border: 1px solid;
  border-left-width: 2px;
  font-size: 0.9rem;
}

.admonition-note    { border-color: var(--ifm-color-emphasis-300); background: var(--ifm-color-emphasis-100); }
.admonition-tip     { border-color: #10b981; background: rgba(16,185,129,0.05); }
.admonition-info    { border-color: #6366f1; background: rgba(99,102,241,0.05); }
.admonition-warning { border-color: #f59e0b; background: rgba(245,158,11,0.05); }
.admonition-danger  { border-color: #ef4444; background: rgba(239,68,68,0.05); }
.admonition-heading h5 { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.07em; }

/* ── TOC ─────────────────────────────────────────────────── */
.table-of-contents__link {
  font-size: 0.8rem;
  color: var(--ifm-color-content-secondary);
}
.table-of-contents__link:hover,
.table-of-contents__link--active { color: var(--ifm-color-primary); }

/* ── Pagination ──────────────────────────────────────────── */
.pagination-nav__link {
  border: 1px solid var(--ifm-color-emphasis-200);
  border-radius: 0 !important;
  transition: all 0.12s ease;
}
.pagination-nav__link:hover {
  border-color: var(--ifm-color-primary);
  background: var(--ifm-color-emphasis-100);
}

/* ── Footer ──────────────────────────────────────────────── */
.footer {
  border-top: 1px solid #1f1f1f;
  background-color: #0a0a0a !important;
}

.footer__title {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  color: var(--ifm-color-content-secondary);
}

.footer__link-item {
  font-size: 0.875rem;
  color: var(--ifm-color-content-secondary);
}

/* ── Buttons ─────────────────────────────────────────────── */
.button {
  border-radius: 0 !important;
}

/* ── Doc content ─────────────────────────────────────────── */
.markdown { --ifm-heading-margin-top: 1.75rem; }
.markdown > h2:first-child { margin-top: 0; }

/* ── Scrollbar ───────────────────────────────────────────── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #2a2a2a; }
::-webkit-scrollbar-thumb:hover { background: #444; }

/* ── Selection ───────────────────────────────────────────── */
::selection { background: rgba(99,102,241,0.25); }

/* ── Announcement bar ────────────────────────────────────── */
div[class*='announcementBar'] {
  border-radius: 0 !important;
}