@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* Primary */
  --ns-forest: #2D3E32;
  --ns-sage: #A8C4A2;
  --ns-moss: #4A6B52;
  
  /* Accent */
  --ns-teal: #5B9EA6;
  --ns-mist: #8FADB4;
  
  /* Dark Mode (PRIMARY) */
  --ns-bg-dark: #0F1210;
  --ns-bg-elevated: #181C19;
  --ns-bg-surface: #1E2420;
  --ns-border: #2A332C;
  --ns-text-primary: #E8EDE9;
  --ns-text-secondary: #A3ADA5;
  --ns-text-muted: #6B756D;
  
  /* Light Mode (SECONDARY) */
  --ns-bg-light: #F5F3F0;
  --ns-bg-light-elevated: #FFFFFF;
  --ns-bg-light-surface: #ECEAE6;
  --ns-border-light: #D4D1CB;
  --ns-text-light-primary: #1A1F1B;
  --ns-text-light-secondary: #4A524C;
  
  /* Typography */
  --ns-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --ns-font-mono: 'JetBrains Mono', monospace;
}

/* Default dark tokens applied */
html{font-family:var(--ns-font-sans)}
body{box-sizing:border-box;margin:0;padding:0;background:var(--ns-bg-dark);color:var(--ns-text-primary);font-family:var(--ns-font-sans)}
.container{max-width:1100px;margin:0 auto;padding:20px}
.brand-card,.card{background:var(--ns-bg-elevated);border:1px solid var(--ns-border);border-radius:8px;padding:18px;margin-bottom:18px;color:var(--ns-text-primary)}

/* Top-right brand controls */
#brand-controls{position:fixed;top:12px;right:12px;display:flex;gap:8px;z-index:1000}
.bc-btn{background:transparent;border:1px solid var(--ns-border);color:var(--ns-text-primary);padding:8px 10px;border-radius:6px;cursor:pointer;font-weight:600}
.bc-btn:hover{background:var(--ns-sage);color:var(--ns-forest)}
.bc-link{display:inline-flex;align-items:center;gap:8px;text-decoration:none;color:var(--ns-text-primary)}

/* Light mode support */
@media (prefers-color-scheme: light){
  body{background:var(--ns-bg-light);color:var(--ns-text-light-primary)}
  .brand-card,.card{background:var(--ns-bg-light-elevated);border:1px solid var(--ns-border-light);color:var(--ns-text-light-primary)}
}

/* explicit .light class */
.light body,html.light body{background:var(--ns-bg-light);color:var(--ns-text-light-primary)}
.light .brand-card,.light .card,html.light .brand-card,html.light .card{background:var(--ns-bg-light-elevated);border:1px solid var(--ns-border-light);color:var(--ns-text-light-primary)}

/* Code font */
code,pre{font-family:var(--ns-font-mono)}