/* _core.css: the full token set at a neutral baseline, and the styles that read it.
   Zero specificity (:where), so any theme wins. Components read tokens and nothing else. */

:where([data-theme]) {
  --t-font-ui: system-ui, sans-serif;
  --t-font-heading: system-ui, sans-serif;
  --t-font-mono: ui-monospace, monospace;
  --t-size-sm: 13px;
  --t-size-md: 15px;
  --t-size-xl: 22px;
  --t-size-2xl: 28px;
  --t-weight-bold: 600;
  --t-tracking-tight: -0.01em;
  --t-eyebrow-transform: none;
  --t-eyebrow-tracking: 0;
  --t-canvas: #f5f5f5;
  --t-surface: #ffffff;
  --t-sunken: #eeeeee;
  --t-fg: #111111;
  --t-fg-secondary: #555555;
  --t-fg-muted: #888888;
  --t-border: #e2e2e2;
  --t-border-strong: #cccccc;
  --t-action: #222222;
  --t-action-hover: #000000;
  --t-action-fg: #ffffff;
  --t-accent: #222222;
  --t-success: #2c6a50;
  --t-success-subtle: #e8f2ee;
  --t-warning: #8a6116;
  --t-warning-subtle: #fbf1de;
  --t-danger: #a8322a;
  --t-danger-fg: #ffffff;
  --t-danger-subtle: #fbecea;
  --t-focus-ring: rgb(0 0 0 / 0.25);
  --t-card-border-width: 1px;
  --t-card-shadow: none;
  --t-card-bg: var(--t-surface);
  --t-space-2: 8px;
  --t-space-3: 12px;
  --t-space-4: 16px;
  --t-space-5: 24px;
  --t-row-h: 44px;
  --t-radius-sm: 4px;
  --t-radius-md: 6px;
  --t-badge-radius: var(--t-radius-sm);
  --t-badge-border-width: 0;
  --t-badge-fill: 1;
  --t-dur-base: 150ms;
  --t-ease: ease;
}

:where([data-theme]) { background: var(--t-canvas); color: var(--t-fg); font: var(--t-size-md)/1.5 var(--t-font-ui); min-height: 100vh; }
:where(.t-page) { max-width: 920px; margin: 0 auto; padding: var(--t-space-5); display: grid; gap: var(--t-space-5); }
:where(.t-eyebrow) { margin: 0; font-size: var(--t-size-sm); color: var(--t-fg-muted); text-transform: var(--t-eyebrow-transform); letter-spacing: var(--t-eyebrow-tracking); }
:where(.t-title) { margin: 0; font: var(--t-weight-bold) var(--t-size-2xl)/1.2 var(--t-font-heading); letter-spacing: var(--t-tracking-tight); }
:where(.t-sub) { margin: 0; color: var(--t-fg-secondary); }
:where(.t-grid) { display: grid; gap: var(--t-space-4); grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
:where(.t-card) { background: var(--t-card-bg); border: var(--t-card-border-width) solid var(--t-border); box-shadow: var(--t-card-shadow); border-radius: var(--t-radius-md); padding: var(--t-space-4); display: grid; gap: var(--t-space-3); }
:where(.t-row) { display: flex; justify-content: space-between; align-items: center; gap: var(--t-space-2); }
:where(.t-mono) { font-family: var(--t-font-mono); font-size: var(--t-size-sm); color: var(--t-fg-secondary); margin: 0; }
:where(.t-actions) { display: flex; gap: var(--t-space-2); }
:where(.t-btn) { font: inherit; font-size: var(--t-size-sm); padding: var(--t-space-2) var(--t-space-3); border-radius: var(--t-radius-sm); border: 1px solid var(--t-border-strong); background: var(--t-surface); color: var(--t-fg); cursor: pointer; transition: background var(--t-dur-base) var(--t-ease); }
:where(.t-btn:focus-visible, .t-input:focus-visible) { outline: 3px solid var(--t-focus-ring); outline-offset: 1px; }
:where(.t-btn--primary) { background: var(--t-action); border-color: var(--t-action); color: var(--t-action-fg); }
:where(.t-btn--primary:hover) { background: var(--t-action-hover); }
:where(.t-btn--danger) { background: var(--t-danger); border-color: var(--t-danger); color: var(--t-danger-fg); }
:where(.t-badge) { font-size: var(--t-size-sm); padding: 2px var(--t-space-2); border-radius: var(--t-badge-radius); border: var(--t-badge-border-width) solid currentColor; white-space: nowrap; }
:where(.t-badge--success) { color: var(--t-success); background: rgb(from var(--t-success-subtle) r g b / var(--t-badge-fill)); }
:where(.t-badge--warning) { color: var(--t-warning); background: rgb(from var(--t-warning-subtle) r g b / var(--t-badge-fill)); }
:where(.t-badge--danger)  { color: var(--t-danger);  background: rgb(from var(--t-danger-subtle) r g b / var(--t-badge-fill)); }
:where(.t-label) { font-size: var(--t-size-sm); color: var(--t-fg-secondary); }
:where(.t-input) { font: inherit; padding: var(--t-space-2) var(--t-space-3); border-radius: var(--t-radius-sm); border: 1px solid var(--t-border-strong); background: var(--t-surface); color: var(--t-fg); }
:where(.t-table) { width: 100%; border-collapse: collapse; }
:where(.t-table th) { text-align: left; font-size: var(--t-size-sm); color: var(--t-fg-muted); font-weight: 500; padding: var(--t-space-2) 0; border-bottom: 1px solid var(--t-border-strong); }
:where(.t-table td) { height: var(--t-row-h); border-bottom: 1px solid var(--t-border); }
:where(.t-num) { text-align: right; }
:where(.t-dot) { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: var(--t-space-2); }
:where(.t-dot--success) { background: var(--t-success); }
:where(.t-dot--warning) { background: var(--t-warning); }
:where(.t-dot--danger)  { background: var(--t-danger); }
:where(.t-empty) { display: grid; justify-items: center; gap: var(--t-space-2); text-align: center; padding: var(--t-space-5); border: 1px dashed var(--t-border-strong); border-radius: var(--t-radius-md); color: var(--t-fg-secondary); }
:where(.t-empty p) { margin: 0; }