/* ============================================================
   tokens.css — Single source of truth for design tokens
   Loaded FIRST in base.html before any other stylesheet.
   Special Considerations:
   - Centralizes variables for both light and dark themes.
   - Defines --topbar-height for components (e.g. notes sidebar) that align beneath the top header.
   ============================================================ */

:root {
  /* Neutral palette — warm grey, not blue-grey */
  --ink-0:  #ffffff;
  --ink-50: #faf9f7;
  --ink-100:#f1efeb;
  --ink-200:#e4e0d8;
  --ink-300:#cfc9bd;
  --ink-500:#6b6558;
  --ink-700:#3a362f;
  --ink-900:#17150f;
  --ink-1000: #16A34A;
  --ink-1001: #DC112E;

  /* Layout configuration */
  --topbar-height: 70px;
  --page-top-gap: 24px;

  /* Single, restrained accent — deep ink-red */
  --accent:      var(--ink-1000);
  --accent-ink: var(--ink-1000);

  /* Semantic data-visualization palette shared by canvas charts. */
  --chart-success: #237A45;
  --chart-info:    #4940DF;
  --chart-warning: #A85E09;
  --chart-danger:  var(--ink-1000);

  --surface:        var(--ink-0);
  --surface-sunken: var(--ink-50);
  --surface-raised: var(--ink-0);
  --hairline:       var(--ink-200);
  --hairline-strong:var(--ink-300);
  --text:           var(--ink-900);
  --text-soft:      var(--ink-500);
  --text-on-accent: #ffffff;

  /* Aliases — keep header.css working without find-and-replace */
  --bg:          var(--surface);
  --border:      var(--hairline);
  --hover:       var(--surface-sunken);
  --muted:       var(--text-soft);
  --primary:     var(--text);          
  --primary-dark: var(--accent);

  /* Typography */
  --font-sans:  "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-serif: "Source Serif 4", "Source Serif Pro", Georgia, "Times New Roman", serif;
  --font-mono:  ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;

  /* Geometry */
  --radius:   4px;
  --tap:      40px;
  --duration: 140ms;
  --ease:     cubic-bezier(.2,.6,.2,1);

  /* Brand accent colours (used only inside header brand elements) */
  --gold: #4940DF;
  --pink: #FF395C;
}

/* ===== DARK MODE ===== */
[data-theme="dark"] {
  --ink-0:  #252526;
  --ink-50: #1E1E1E;
  --ink-100: #030409;
  --ink-200:#2e2a23;
  --ink-300:#3d3830;
  --ink-500:#8a8475;
  --ink-700:#c5bfae;
  --ink-900:#ece7d8;

  --accent:     var(--ink-1000);
  --accent-inline:     var(--ink-1000);
  --accent-ink: #f1a48d;

  --chart-success: #5ABD7A;
  --chart-info:    #9A92FF;
  --chart-warning: #F0AE54;
  --chart-danger:  #DC112E;

  --surface:        var(--ink-0);
  --surface-sunken: #030409;
  --surface-raised: var(--ink-50);
  --text-on-accent: #14130f;
  --code-bg:        #282c34;
}

/* ===== GENERAL DARK MODE CODE BLOCK TOKEN ===== */
[data-theme="dark"] pre,
.theme-dark pre {
  background-color: var(--code-bg, #282c34);
  border: 1px solid var(--hljs-border, rgba(255, 255, 255, 0.12));
  border-radius: 8px;
  color: var(--hljs-fg, #abb2bf);
}

/* ===== GLOBAL RESET ===== */
*,*::before,*::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--surface-sunken);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background 0.3s, color 0.3s;
}

a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}



/* ==========================================================================
   UNIFIED ULTRA-THIN SCROLLBAR DESIGN SYSTEM (Global W3C + WebKit)
   Applies to every horizontal and vertical scrollbar across the entire site
   ========================================================================== */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--line, rgba(255, 255, 255, 0.15)) transparent;
}

::-webkit-scrollbar-button {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

::-webkit-scrollbar {
  width: 0.35rem !important;
  height: 0.35rem !important;
}

::-webkit-scrollbar-track {
  background: transparent !important;
}

::-webkit-scrollbar-thumb {
  background-color: var(--line, rgba(255, 255, 255, 0.2)) !important;
  border-radius: 999px !important;
}

::-webkit-scrollbar-thumb:hover {
  background-color: var(--ink-soft, rgba(255, 255, 255, 0.4)) !important;
}

@media (max-width: 640px) {
  :root {
    --topbar-height: 40px;
    --page-top-gap: 12px;
  }
}


/* ============================================================
   Global Button Loading System (btn_loading.js)
   Triggered by data-btn-loading attribute.
   ============================================================ */

/* Spinning animation */
@keyframes btn-spin {
  to { stroke-dashoffset: -100; }
}

.btn-spinner {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  flex-shrink: 0;
  animation: btn-spin 0.8s linear infinite;
}

/* When a button is in loading state */
button.is-loading,
a.is-loading {
  opacity: 0.75;
  cursor: not-allowed;
  gap: 0.45em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

/* ===== GLOBAL RESET ===== */
*, *::before, *::after { 
  box-sizing: border-box; 
}

/* Global Overflow Protection: prevents long strings/numbers from escaping containers */
body, p, span, li, a, h1, h2, h3, h4, h5, h6, th, td {
  overflow-wrap: anywhere;
}
/* Global Math & Preformatted Block Containment */
.katex-display,
.katex-display-wrapper {
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}

/* Inline math containment */
.katex {
  display: inline-block;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  vertical-align: middle;
}