/* ═══════════════════════════════════════════════════════════════
   Brand Kit — Shared Navigation & Foundation Styles
   Loaded by all Brand Kit pages (index, design-system, backgrounds)
   ═══════════════════════════════════════════════════════════════ */

/* ─── Reset ────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { overflow-x: clip; }

/* ─── Dark Theme (default) ─────────────────────────────────── */
:root {
  /* Brand Colors — fixed */
  --cyan:       #0CF4DF;
  --teal:       #00BBA5;
  --blue:       #254FE5;
  --deep-blue:  #1F3395;
  --cobalt:     #3257D9;
  --navy:       #1A2E73;
  --deep-navy:  #061341;
  --midnight:   #0B0B3C;
  --plum:       #7C316D;

  /* Solution colors */
  --violet: #6B21D4;
  --sol-teal: #5FD9C2;
  --amber: #F2B33D;
  --indigo: #3A2073;
  --crimson: #F25E3D;
  --error: #E5484D;

  /* Gradients */
  --grad-primary: linear-gradient(135deg, #0CF4DF 0%, #1F3395 100%);
  --grad-dark:    linear-gradient(135deg, #7C316D 0%, #0B0B3C 55%, #1A2E73 100%);
  --grad-light:   linear-gradient(135deg, #FFFFFF 0%, #A8BDF8 100%);
  --depth-grad:   linear-gradient(135deg, #7C316D 0%, #0B0B3C 55%, #1A2E73 100%);
  --action-grad:  linear-gradient(135deg, #0CF4DF 0%, #1F3395 100%);

  /* UI tokens — dark */
  --bg:           #07081F;
  --bg-card:      #0E0F2E;
  --bg-card-2:    #12143A;
  --surface:      #0F1035;
  --surface-2:    #161840;
  --border:       rgba(12, 244, 223, 0.12);
  --text:         #FFFFFF;
  --text-muted:   rgba(255, 255, 255, 0.45);
  --text-body:    rgba(255, 255, 255, 0.72);
  --text-caption: rgba(255, 255, 255, 0.42);
  --accent:       #0CF4DF;
  --accent-sec:   rgba(12, 244, 223, 0.08);
  --scale-header-bg: rgba(12, 244, 223, 0.04);
  --nav-bg:       #07081F;
  --nav-border:   rgba(12, 244, 223, 0.12);
  --nav-link:     rgba(255, 255, 255, 0.45);
  --footer-bg:    #0B0B3C;
  --footer-border: rgba(12, 244, 223, 0.12);
  --do-border:    rgba(12, 244, 223, 0.2);
  --do-title:     #0CF4DF;
  --do-marker:    #0CF4DF;
  --list-text:    rgba(255, 255, 255, 0.7);
  --toggle-bg:    rgba(255, 255, 255, 0.1);
  --toggle-border: rgba(255, 255, 255, 0.18);
  --toggle-text:  rgba(255, 255, 255, 0.8);
  --header-bg:    rgba(7, 8, 31, 0.94);
  --code-bg:      rgba(12, 244, 223, 0.06);
  --code-border:  rgba(12, 244, 223, 0.12);

  --radius: 16px;
  --radius-md: 12px;
  --radius-sm: 8px;
  --radius-xs: 4px;
  --t: 0.22s ease;
}

/* ─── Light Theme ──────────────────────────────────────────── */
html[data-theme="light"] {
  --bg:           #F4F5FA;
  --bg-card:      #FFFFFF;
  --bg-card-2:    #ECEEF6;
  --surface:      #FFFFFF;
  --surface-2:    #ECEEF6;
  --border:       rgba(31, 51, 149, 0.12);
  --text:         #0B0B3C;
  --text-muted:   rgba(11, 11, 60, 0.48);
  --text-body:    rgba(11, 11, 60, 0.68);
  --text-caption: rgba(11, 11, 60, 0.38);
  --accent:       #1F3395;
  --accent-sec:   rgba(31, 51, 149, 0.06);
  --scale-header-bg: rgba(31, 51, 149, 0.04);
  --nav-bg:       #FFFFFF;
  --nav-border:   rgba(11, 11, 60, 0.1);
  --nav-link:     rgba(11, 11, 60, 0.48);
  --footer-bg:    #ECEEF6;
  --footer-border: rgba(11, 11, 60, 0.1);
  --do-border:    rgba(31, 51, 149, 0.18);
  --do-title:     #1F3395;
  --do-marker:    #1F3395;
  --list-text:    rgba(11, 11, 60, 0.65);
  --toggle-bg:    rgba(11, 11, 60, 0.06);
  --toggle-border: rgba(11, 11, 60, 0.14);
  --toggle-text:  rgba(11, 11, 60, 0.7);
  --header-bg:    rgba(244, 245, 250, 0.96);
  --code-bg:      rgba(31, 51, 149, 0.04);
  --code-border:  rgba(31, 51, 149, 0.1);
}

/* ─── Base ─────────────────────────────────────────────────── */
html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  transition: background var(--t), color var(--t);
}

/* ─── Logo show/hide by theme ──────────────────────────────── */
.logo-light { display: none; }
.logo-dark  { display: block; }
html[data-theme="light"] .logo-light { display: block; }
html[data-theme="light"] .logo-dark  { display: none; }

/* ─── Top Navigation Bar ──────────────────────────────────── */
.brand-topnav {
  position: sticky;
  top: 0;
  z-index: 200;
  background: var(--header-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  transition: background var(--t), border-color var(--t);
}

.brand-topnav-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 32px;
  height: 60px;
  display: flex;
  align-items: center;
  gap: 24px;
}

/* Logo */
.brand-topnav-logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  text-decoration: none;
}
.brand-topnav-logo img {
  height: 22px;
  width: auto;
}

.brand-topnav-divider {
  width: 1px;
  height: 20px;
  background: var(--border);
  flex-shrink: 0;
}

/* Links */
.brand-topnav-links {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.brand-topnav-links a {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  text-decoration: none;
  padding: 6px 10px;
  border-radius: 6px;
  transition: color 0.15s, background 0.15s;
  white-space: nowrap;
}
.brand-topnav-links a:hover {
  color: var(--text);
  background: rgba(128, 128, 128, 0.08);
}
.brand-topnav-links a.active {
  color: var(--accent);
}

/* Prototypes Dropdown */
.brand-topnav-dropdown {
  position: relative;
}
.brand-topnav-dropdown-trigger {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  padding: 6px 10px;
  border-radius: 6px;
  transition: color 0.15s, background 0.15s;
  white-space: nowrap;
  cursor: pointer;
  background: none;
  border: none;
  font-family: 'Inter', sans-serif;
  display: flex;
  align-items: center;
  gap: 4px;
}
.brand-topnav-dropdown-trigger:hover {
  color: var(--text);
  background: rgba(128, 128, 128, 0.08);
}
.brand-topnav-dropdown-trigger.active {
  color: var(--accent);
}
.brand-topnav-dropdown-trigger svg {
  width: 10px;
  height: 10px;
  transition: transform 0.2s;
}
.brand-topnav-dropdown.open .brand-topnav-dropdown-trigger svg {
  transform: rotate(180deg);
}

.brand-topnav-dropdown-menu {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 220px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 6px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.28);
  z-index: 300;
}
.brand-topnav-dropdown.open .brand-topnav-dropdown-menu {
  display: block;
}
.brand-topnav-dropdown-menu a {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-body);
  text-decoration: none;
  padding: 8px 12px;
  border-radius: 4px;
  transition: color 0.15s, background 0.15s;
}
.brand-topnav-dropdown-menu a:hover {
  color: var(--text);
  background: var(--accent-sec);
}

/* Controls (right side) */
.brand-topnav-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* ─── Theme Toggle Button ──────────────────────────────────── */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--toggle-bg);
  border: 1px solid var(--toggle-border);
  border-radius: 100px;
  padding: 7px 16px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  color: var(--toggle-text);
  font-family: 'Inter', sans-serif;
  transition: background 0.15s, border-color 0.15s, color 0.15s, opacity 0.15s;
  white-space: nowrap;
}
.theme-toggle:hover { opacity: 0.75; }
.theme-toggle svg { width: 14px; height: 14px; flex-shrink: 0; }

/* icon visibility */
.icon-sun  { display: none; }
.icon-moon { display: block; }
html[data-theme="light"] .icon-sun  { display: block; }
html[data-theme="light"] .icon-moon { display: none; }

/* ─── Mobile Hamburger ─────────────────────────────────────── */
.brand-topnav-hamburger {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  color: var(--text-muted);
  transition: color 0.15s;
}
.brand-topnav-hamburger:hover { color: var(--text); }
.brand-topnav-hamburger svg { width: 22px; height: 22px; }

.brand-topnav-mobile-menu {
  display: none;
  position: fixed;
  top: 60px;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--bg);
  z-index: 199;
  padding: 24px 32px;
  overflow-y: auto;
  border-top: 1px solid var(--border);
}
.brand-topnav-mobile-menu.open {
  display: block;
}
.brand-topnav-mobile-menu a {
  display: block;
  font-size: 15px;
  font-weight: 500;
  color: var(--text-muted);
  text-decoration: none;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
  transition: color 0.15s;
}
.brand-topnav-mobile-menu a:hover,
.brand-topnav-mobile-menu a.active {
  color: var(--accent);
}
.brand-topnav-mobile-menu .mobile-menu-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-caption);
  padding: 20px 0 4px;
}

/* ─── Shared Layout ────────────────────────────────────────── */
.container { max-width: 1200px; margin: 0 auto; padding: 0 40px; }
section { padding: 80px 0; }
section + section { border-top: 1px solid var(--border); }

/* ─── Section Headers ──────────────────────────────────────── */
.section-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 10px;
  transition: color var(--t);
}
.section-title {
  font-size: 32px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 12px;
}
.section-desc {
  font-size: 15px;
  color: var(--text-muted);
  max-width: 560px;
  margin-bottom: 48px;
  line-height: 1.7;
}

/* ─── Side Nav (shared between index & design-system) ──────── */
.page-layout {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 0;
}
.side-nav {
  background: var(--nav-bg);
  border-right: 1px solid var(--nav-border);
  transition: background var(--t), border-color var(--t);
}
.side-nav-inner {
  position: sticky;
  top: 60px;
  height: calc(100vh - 60px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  width: 220px;
}
.side-nav-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 24px 0 16px 40px;
  scrollbar-width: none;
}
.side-nav-scroll::-webkit-scrollbar { display: none; }
.side-nav-title {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 10px;
}
.side-nav ul { list-style: none; display: flex; flex-direction: column; gap: 2px; }
.side-nav a {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--nav-link);
  text-decoration: none;
  padding: 7px 0;
  transition: color 0.15s;
  border-left: 2px solid transparent;
  padding-left: 12px;
  margin-left: -12px;
}
.side-nav a:hover,
.side-nav a.active { color: var(--accent); border-left-color: var(--accent); }
.main-content { padding: 0; min-width: 0; }

/* ─── Mobile Section Nav ───────────────────────────────────── */
.mobile-nav {
  display: none;
  position: sticky;
  top: 60px;
  z-index: 90;
  background: var(--nav-bg);
  border-bottom: 1px solid var(--nav-border);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  transition: background var(--t), border-color var(--t);
}
.mobile-nav::-webkit-scrollbar { display: none; }
.mobile-nav-inner {
  display: flex;
  gap: 2px;
  padding: 10px 24px;
  white-space: nowrap;
}
.mobile-nav a {
  font-size: 12px;
  font-weight: 600;
  color: var(--nav-link);
  text-decoration: none;
  padding: 6px 12px;
  border-radius: 100px;
  border: 1px solid transparent;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
  white-space: nowrap;
}
.mobile-nav a:hover,
.mobile-nav a.active { color: var(--accent); background: var(--accent-sec); border-color: var(--accent); }

/* ─── Footer ───────────────────────────────────────────────── */
.brand-footer {
  background: var(--footer-bg);
  border-top: 1px solid var(--footer-border);
  padding: 40px 0;
  transition: background var(--t), border-color var(--t);
}
.brand-footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 40px;
}
.brand-footer-inner .logo-dark,
.brand-footer-inner .logo-light { height: 28px; width: auto; opacity: 0.6; }
.brand-footer-text { font-size: 12px; color: var(--text-muted); }
.brand-footer-version {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  opacity: 0.7;
  transition: color var(--t);
}

/* ─── Copy Toast ───────────────────────────────────────────── */
#copy-toast {
  position: fixed;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--accent);
  color: #07081F;
  font-size: 13px;
  font-weight: 600;
  padding: 10px 28px;
  border-radius: 100px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s, transform 0.25s;
  z-index: 9999;
}
#copy-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ─── Responsive ───────────────────────────────────────────── */
@media (max-width: 900px) {
  .brand-topnav-links,
  .brand-topnav-divider,
  .brand-topnav-dropdown { display: none; }
  .brand-topnav-hamburger { display: block; }
  .brand-topnav-inner { padding: 0 16px; }

  .mobile-nav { display: block; }
  .page-layout { grid-template-columns: 1fr; }
  .side-nav { display: none; }
  .container { padding: 0 20px; }
  section { padding: 48px 0; }
  .section-title { font-size: 24px; }
  .mobile-nav-inner { padding: 8px 16px; }
  .brand-footer-inner { padding: 0 20px; }
}

@media (max-width: 600px) {
  .brand-topnav-inner { gap: 12px; }
}