/* psdocs · tokens.css — design tokens (colors, fonts, spacing, radii) */

:root {
  /* Fonts */
  --font-sans:
    -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans",
    Helvetica, Arial, sans-serif,
    "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
    "Source Han Sans SC", "Noto Sans CJK SC",
    "Apple Color Emoji", "Segoe UI Emoji";
  --font-mono:
    ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
    "Liberation Mono", monospace;

  /* Font sizes / line-heights */
  --fs-12: 12px;  --lh-12: 18px;
  --fs-13: 13px;  --lh-13: 20px;
  --fs-14: 14px;  --lh-14: 20px;
  --fs-16: 16px;  --lh-16: 24px;
  --fs-20: 20px;  --lh-20: 28px;
  --fs-24: 24px;  --lh-24: 32px;
  --fs-32: 32px;  --lh-32: 40px;
  --fs-40: 40px;  --lh-40: 48px;

  /* Neutral palette (Primer Light) */
  --color-fg-default:    #1F2328;
  --color-fg-muted:      #59636E;
  --color-fg-subtle:     #6E7781;
  --color-fg-onEmphasis: #FFFFFF;

  --color-canvas-default: #FFFFFF;
  --color-canvas-subtle:  #F6F8FA;
  --color-canvas-inset:   #EFF2F5;

  --color-border-default: #D1D9E0;
  --color-border-muted:   rgba(209, 217, 224, 0.7);

  /* Brand (ProteinSeek teal, replaces GitHub blue) */
  --color-accent-fg:       #0F766E;
  --color-accent-emphasis: #0F766E;
  --color-accent-subtle:   #E6F4F1;
  --color-selection-indicator: #2F81F7;

  /* Semantic */
  --color-success-fg:   #1A7F37;
  --color-attention-fg: #9A6700;
  --color-danger-fg:    #D1242F;
  --color-done-fg:      #8250DF;

  /* Shadows */
  --shadow-sm: 0 1px 0 rgba(31, 35, 40, 0.04);
  --shadow-md: 0 3px 6px rgba(140, 149, 159, 0.15);
  --shadow-lg: 0 8px 24px rgba(140, 149, 159, 0.2);

  /* Spacing (8pt grid) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 40px;
  --space-8: 48px;

  /* Radii */
  --radius-1: 4px;
  --radius-2: 6px;
  --radius-3: 8px;
  --radius-pill: 999px;

  /* Layout */
  --layout-max-width: 1280px;
  --layout-header-height: 64px;
  --layout-sidebar-width: 296px;
  --layout-toc-width: 400px;
  --layout-content-max: 720px;
  --layout-content-toc-gap: 80px;

  /* Breakpoints (for JS reference; CSS uses @media directly) */
  --bp-sm: 480px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;

  /* Transitions */
  --t-fast: 80ms cubic-bezier(0.33, 1, 0.68, 1);
  --t-base: 160ms cubic-bezier(0.33, 1, 0.68, 1);
}