/* ot-tpl design tokens — single source of truth for the Obsidian theme */
:root {
  /* Surface — OLED black ladder */
  --ot-bg:           #08080a;
  --ot-bg-elev:      #0d0d10;
  --ot-surface-1:    #131316;
  --ot-surface-2:    #1c1c20;
  --ot-surface-3:    #26262c;
  --ot-overlay:      rgba(8, 8, 10, .72);

  /* Borders — kept hairline on OLED to avoid grey halos */
  --ot-border:       rgba(255, 255, 255, .06);
  --ot-border-hi:    rgba(255, 255, 255, .12);
  --ot-border-focus: rgba(251, 191, 36, .55);

  /* Text */
  --ot-text:         #f4f4f5;
  --ot-text-mute:    #a1a1aa;
  --ot-text-dim:     #71717a;
  --ot-text-ink:     #d4d4d8;

  /* Accent — restrained amber, CTA / focal numbers only */
  --ot-accent:       #fbbf24;
  --ot-accent-hi:    #fcd34d;
  --ot-accent-ink:   #1a1408;
  --ot-accent-soft:  rgba(251, 191, 36, .16);
  --ot-accent-glow:  rgba(251, 191, 36, .35);

  /* Semantic */
  --ot-danger:       #f87171;
  --ot-ok:           #34d399;

  /* Radius — Bento signature */
  --ot-r-xs: 8px;
  --ot-r-sm: 12px;
  --ot-r:    20px;
  --ot-r-lg: 28px;
  --ot-r-pill: 999px;

  /* Shadow — soft on OLED, avoid grey wash */
  --ot-shadow-1: 0 1px 0 rgba(255, 255, 255, .04) inset,
                 0 8px 24px rgba(0, 0, 0, .45);
  --ot-shadow-2: 0 1px 0 rgba(255, 255, 255, .06) inset,
                 0 12px 32px rgba(0, 0, 0, .55);
  --ot-shadow-hover: 0 1px 0 rgba(255, 255, 255, .08) inset,
                     0 18px 48px rgba(0, 0, 0, .65),
                     0 0 0 1px var(--ot-accent-soft);

  /* Typography */
  --ot-font-sans: "Geist", "Inter", "Plus Jakarta Sans",
                  -apple-system, BlinkMacSystemFont, "PingFang SC",
                  "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --ot-font-mono: "Geist Mono", "JetBrains Mono", ui-monospace,
                  "SF Mono", Menlo, Consolas, monospace;

  --ot-fs-xs:  12px;
  --ot-fs-sm:  13px;
  --ot-fs-md:  15px;
  --ot-fs-lg:  18px;
  --ot-fs-xl:  22px;
  --ot-fs-2xl: 28px;
  --ot-fs-3xl: 36px;
  --ot-fs-4xl: 48px;

  --ot-fw-r: 400;
  --ot-fw-m: 500;
  --ot-fw-s: 600;
  --ot-fw-b: 700;

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

  /* Layout */
  --ot-container: 1440px;
  --ot-gap:       16px;
  --ot-gap-lg:    24px;
  --ot-nav-h:     64px;
  --ot-nav-h-m:   56px;

  /* Motion */
  --ot-ease:    cubic-bezier(.2, .8, .2, 1);
  --ot-ease-out: cubic-bezier(.16, 1, .3, 1);
  --ot-dur-1: 160ms;
  --ot-dur-2: 240ms;
  --ot-dur-3: 360ms;

  /* z-index ladder */
  --ot-z-nav:    50;
  --ot-z-drawer: 60;
  --ot-z-modal:  70;
  --ot-z-toast:  80;
}