/* Blog Theme Tokens and Skeleton Classes */

/* Theme tokens */
:root {
  /* Colors */
  --color-bg: #ffffff;
  --color-surface: #ffffff;
  --color-surface-muted: #f9fafb;
  --color-border: #e5e7eb;
  --color-divider: #e5e7eb;
  --color-text: #111827;
  --color-text-muted: #6b7280;
  --color-text-soft: #9ca3af;
  --color-primary: #2563eb;
  --color-success: #16a34a;
  --color-warning: #f59e0b;
  --color-danger: #dc2626;
  --color-inverse: #ffffff;
  --color-inverse-surface: #111827;

  /* Typography */
  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  --lh-base: 1.6;
  --fs-xs: 0.8rem;
  --fs-sm: 0.9rem;
  --fs-base: 1rem;
  --fs-lg: 1.125rem;
  --fs-xl: 1.5rem;
  --fs-2xl: 2rem;

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

  /* Radius & Shadows */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.04);
  --shadow-md: 0 2px 8px rgba(0,0,0,.06);
}

/* Base */
* { box-sizing: border-box; }
html, body { background: var(--color-bg); color: var(--color-text); }
body { font-family: var(--font-sans); line-height: var(--lh-base); margin: 0; }

/* Canonical skeleton class names */
.ds-container { max-width: 800px; margin: 0 auto; padding: var(--space-8) var(--space-5); }
.ds-article-header {
  text-align: center;
  margin-bottom: var(--space-8);
  padding: var(--space-6) var(--space-4);
  background: var(--color-surface-muted);
  border: 1px solid var(--color-border);
}
.ds-article-title { font-size: var(--fs-2xl); font-weight: 600; margin: 0 0 var(--space-3); color: var(--color-text); }
.ds-article-subtitle { color: var(--color-text-muted); font-size: var(--fs-lg); }
.ds-article-date { color: var(--color-text-soft); font-size: var(--fs-sm); margin-top: var(--space-2); }

.ds-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-6); box-shadow: var(--shadow-sm); }
.ds-block { background: var(--color-surface); border: 1px solid var(--color-border); padding: var(--space-6); }
.ds-tip { background: #fef3c7; border-left: 4px solid var(--color-warning); padding: var(--space-5); }
.ds-info { background: var(--color-surface-muted); border: 1px solid var(--color-border); padding: var(--space-5); }
.ds-cta { background: var(--color-inverse-surface); color: var(--color-inverse); text-align: center; padding: var(--space-8) var(--space-6); }
.ds-btn { display: inline-block; background: var(--color-primary); color: var(--color-inverse); padding: var(--space-3) var(--space-5); text-decoration: none; font-weight: 600; border-radius: var(--radius-sm); }

.ds-image { text-align: center; margin: var(--space-8) 0; padding: var(--space-4); background: var(--color-surface-muted); border: 1px solid var(--color-border); }
.ds-image img { max-width: 100%; height: auto; border: 1px solid var(--color-divider); }

.ds-table { width: 100%; border-collapse: collapse; margin: var(--space-6) 0; background: var(--color-surface); border: 1px solid var(--color-border); }
.ds-table th { background: var(--color-inverse-surface); color: var(--color-inverse); padding: var(--space-3) var(--space-4); text-align: center; font-weight: 600; }
.ds-table td { padding: var(--space-3) var(--space-4); text-align: center; border-bottom: 1px solid var(--color-divider); }
.ds-table tr:nth-child(even) { background: var(--color-surface-muted); }
.ds-table .is-ok { color: var(--color-success); font-weight: 600; }
.ds-table .is-warn { color: var(--color-warning); font-weight: 600; }
.ds-table .is-bad { color: var(--color-danger); font-weight: 600; }

.ds-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-4); }

/* Blog index skeleton */
.ds-list { display: grid; gap: var(--space-4); }
.ds-list-item { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-2); cursor: pointer; }
.ds-list-item-title { font-size: var(--fs-lg); color: var(--color-text); text-decoration: none; }
.ds-list-item-date { font-size: var(--fs-sm); color: var(--color-text-soft); }

@media (max-width: 768px) {
  .ds-container { padding: var(--space-5) var(--space-4); }
  .ds-article-title { font-size: 1.75rem; }
}