/* ============================================================
   ArchiveBox Design System — Tokens
   Neutral, dense, docs-first marketplace styling
   ============================================================ */

:root {
  /* ---- Color: Neutrals -------------------------------------- */
  --ab-paper:        #f7f8fa;
  --ab-paper-2:      #eef1f4;
  --ab-paper-3:      #d9dee5;
  --ab-vellum:       #ffffff;
  --ab-ink:          #18202a;
  --ab-ink-2:        #334155;
  --ab-ink-3:        #697586;
  --ab-ink-4:        #9aa4b2;

  /* ---- Color: Accent ---------------------------------------- */
  --ab-oxblood:      #2f6f9f;
  --ab-oxblood-2:    #245a83;
  --ab-oxblood-3:    #5d93bb;
  --ab-oxblood-wash: #e7f0f8;
  --ab-ochre:        #9a6b18;
  --ab-moss:         #3f7f5f;
  --ab-slate:        #586779;

  /* ---- Semantic --------------------------------------------- */
  --ab-bg:           var(--ab-paper);
  --ab-bg-elev:      var(--ab-vellum);
  --ab-bg-sunken:    var(--ab-paper-2);
  --ab-fg:           var(--ab-ink);
  --ab-fg-muted:     var(--ab-ink-3);
  --ab-fg-faint:     var(--ab-ink-4);
  --ab-rule:         var(--ab-paper-3);
  --ab-rule-strong:  #c9d1dc;
  --ab-accent:       var(--ab-oxblood);
  --ab-accent-hover: var(--ab-oxblood-2);
  --ab-accent-wash:  var(--ab-oxblood-wash);
  --ab-on-accent:    var(--ab-vellum);
  --ab-selection:    #dcecf8;

  /* ---- Typography ------------------------------------------- */
  --ab-font-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --ab-font-sans:  -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --ab-font-mono:  "SF Mono", "Cascadia Code", "Roboto Mono", Menlo, Consolas, monospace;
  --ab-font-label: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Type scale */
  --ab-size-xs:   11px;
  --ab-size-sm:   13px;
  --ab-size-base: 15px;
  --ab-size-md:   17px;
  --ab-size-lg:   20px;
  --ab-size-xl:   26px;
  --ab-size-2xl:  34px;
  --ab-size-3xl:  38px;
  --ab-size-4xl:  48px;
  --ab-size-display: 54px;

  --ab-lh-tight:  1.15;
  --ab-lh-snug:   1.3;
  --ab-lh-normal: 1.55;
  --ab-lh-loose:  1.75;

  /* ---- Space (8-based) -------------------------------------- */
  --ab-s-0: 0;
  --ab-s-1: 4px;
  --ab-s-2: 8px;
  --ab-s-3: 12px;
  --ab-s-4: 16px;
  --ab-s-5: 24px;
  --ab-s-6: 32px;
  --ab-s-7: 48px;
  --ab-s-8: 64px;
  --ab-s-9: 96px;
  --ab-s-10: 128px;

  /* ---- Radii — restrained ----------------------------------- */
  --ab-r-0: 0;
  --ab-r-1: 2px;
  --ab-r-2: 4px;
  --ab-r-3: 6px;
  --ab-r-pill: 999px;

  /* ---- Shadows ---------------------------------------------- */
  --ab-shadow-1: 0 1px 2px rgba(24,32,42,.05);
  --ab-shadow-2: 0 8px 24px rgba(24,32,42,.10);
  --ab-shadow-inset: inset 0 1px 0 rgba(255,255,255,.8);

  /* ---- Motion ----------------------------------------------- */
  --ab-ease: cubic-bezier(.2, .6, .2, 1);
  --ab-dur-1: 120ms;
  --ab-dur-2: 200ms;
  --ab-dur-3: 320ms;

  /* ---- Density (compact is the baseline) --------------------- */
  --ab-row-h: 32px;
  --ab-ctrl-h: 28px;
  --ab-ctrl-px: 10px;
  --ab-gap: var(--ab-s-3);
  --ab-pad: var(--ab-s-4);

  /* ---- Layout ----------------------------------------------- */
  --ab-measure: 68ch;
  --ab-content-w: 1200px;
  --ab-sidebar-w: 240px;

  --ab-grain-opacity: 0;
}
/* ============ DARK ============================================ */
:root[data-theme="dark"] {
  --ab-paper:        #101418;
  --ab-paper-2:      #171d23;
  --ab-paper-3:      #2a333d;
  --ab-vellum:       #151a20;
  --ab-ink:          #eef2f6;
  --ab-ink-2:        #d1d9e2;
  --ab-ink-3:        #94a3b3;
  --ab-ink-4:        #657487;

  --ab-oxblood:      #7db7df;
  --ab-oxblood-2:    #a8d3ef;
  --ab-oxblood-3:    #4b86b0;
  --ab-oxblood-wash: #172838;
  --ab-ochre:        #d1a246;
  --ab-moss:         #79b892;
  --ab-slate:        #9aaabc;

  --ab-bg:           var(--ab-paper);
  --ab-bg-elev:      var(--ab-paper-2);
  --ab-bg-sunken:    #0d1116;
  --ab-fg:           var(--ab-ink);
  --ab-fg-muted:     var(--ab-ink-3);
  --ab-fg-faint:     var(--ab-ink-4);
  --ab-rule:         var(--ab-paper-3);
  --ab-rule-strong:  #3a4652;
  --ab-accent:       var(--ab-oxblood);
  --ab-accent-hover: var(--ab-oxblood-2);
  --ab-accent-wash:  var(--ab-oxblood-wash);
  --ab-on-accent:    #17140f;
  --ab-selection:    #1e3a50;

  --ab-shadow-1: 0 1px 2px rgba(0,0,0,.25);
  --ab-shadow-2: 0 8px 24px rgba(0,0,0,.35);
  --ab-shadow-inset: inset 0 1px 0 rgba(255,255,255,.04);

  --ab-grain-opacity: 0;
}