/* ============================================================
   Nyckel — Shared Design Tokens
   Single source of truth for fonts, colors, borders, and radii
   shared by BOTH the docs template (docs.css) and the marketing
   site (main.scss). Loaded before each section's own stylesheet.

   Dark-mode overrides live in docs.css ([data-theme="dark"]) and
   apply only to the docs section.

   Fonts  : Inter (body), JetBrains Mono (code)
   Colors : Blue #1e5c97 | Orange #d4932e | Green #16a34a
   ============================================================ */

/* ── CSS Variables — Light Mode (base) ── */
:root,
[data-theme="light"] {
  --docs-font:    Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --docs-mono:    "JetBrains Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;

  --docs-blue:    #1e5c97;
  --docs-blue-hover: #155082;
  --docs-orange:  #d4932e;
  --docs-green:   #16a34a;
  --docs-red:     #dc2626;

  /* Surfaces */
  --docs-bg:          #ffffff;
  --docs-bg-subtle:   #f6f8fa;
  --docs-bg-hover:    #f0f3f7;
  --docs-bg-active:   #eef3fb;

  /* Borders */
  --docs-border:        #d0d7de;
  --docs-border-subtle: #e8ecf0;

  /* Text */
  --docs-text:        #1c1e21;
  --docs-text-muted:  #57606a;
  --docs-text-light:  #6e7781;

  /* Code */
  --docs-code-bg:     #f3f4f6;
  --docs-code-border: #e1e4e8;
  --docs-code-text:   #1c2b4a;
  --docs-block-bg:    #161b22;
  --docs-block-text:  #e6edf3;
  --docs-block-border:#30363d;

  /* Header */
  --docs-header-bg:     #ffffff;
  --docs-header-border: #e1e4e8;
  --docs-header-h:      52px;

  /* Shared header spacing — unifies the marketing navbar and docs header so
     both render with identical logo/menu spacing regardless of root font-size.
     Always expressed in px so the 20px (marketing) vs 16px (docs) root never
     skews the layout. */
  --hdr-pad-x:      20px;  /* outer horizontal padding (logo → left edge) */
  --hdr-logo-gap:   6px;   /* logo icon → wordmark */
  --hdr-nav-offset: 24px;  /* logo cluster → first menu item */
  --hdr-item-gap:   2px;   /* between menu items */
  --hdr-item-pad-y: 5px;   /* menu item vertical padding */
  --hdr-item-pad-x: 11px;  /* menu item horizontal padding */

  /* Sidebar */
  --docs-sidebar-w:     220px;

  /* Content */
  --docs-content-max:   680px;

  /* Radii */
  --docs-r:   5px;
  --docs-r-lg:8px;

  /* ──────────────────────────────────────────────────────────────
     SITE-WIDE VOCABULARY (preferred going forward)
     Neutral, section-agnostic names. The legacy --docs-* names above
     remain valid (these alias to them), but new code should use these.
     This block is the single source of truth for fonts, color, the
     type scale, spacing, weights, and radii — shared by the marketing
     site (main.scss) and the docs (docs.css) alike.
     ────────────────────────────────────────────────────────────── */

  /* Fonts — Inter is the one canonical UI/body font, JetBrains Mono for code.
     (Jost was retired; it was declared but never applied.) */
  --font-sans: var(--docs-font);
  --font-mono: var(--docs-mono);

  /* Colors (neutral aliases) */
  --color-blue:        var(--docs-blue);
  --color-blue-hover:  var(--docs-blue-hover);
  --color-orange:      var(--docs-orange);
  --color-green:       var(--docs-green);
  --color-red:         var(--docs-red);
  --color-text:        var(--docs-text);
  --color-text-muted:  var(--docs-text-muted);
  --color-text-light:  var(--docs-text-light);
  --color-bg:          var(--docs-bg);
  --color-bg-subtle:   var(--docs-bg-subtle);
  --color-border:      var(--docs-border);

  /* Type scale — expressed in px on purpose.
     The marketing root is 20px and docs root is 13.5px, so rem-based
     sizes render differently per section (the historic source of the
     "ballooning font" bugs). px keeps every section identical until the
     root is normalized in the homepage rebuild. */
  --text-2xs:  11px;
  --text-xs:   12px;
  --text-sm:   13px;
  --text-base: 14px;
  --text-md:   15px;
  --text-lg:   17px;
  --text-xl:   20px;
  --text-2xl:  24px;
  --text-3xl:  30px;
  --text-4xl:  37px;
  /* Content & display sizes — marketing reading copy + hero/page titles */
  --text-content: 16px;  /* body / paragraph reading size */
  --text-lead:    18px;  /* intros, lead paragraphs, card titles */
  --text-display: 34px;  /* page titles / hero display text */

  /* Font weights */
  --fw-normal:   400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* Spacing scale */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;

  /* Radii (neutral aliases) */
  --radius:    var(--docs-r);
  --radius-lg: var(--docs-r-lg);
}