/* UX-300B — Waffinnity Enterprise Design Tokens & Component Foundation
   Additive migration scope: apply class="enterprise-ui" to a page root/body.
   Light/dark use semantic tokens only. Legacy screens remain untouched until migrated. */

:root {
  --wf-font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --wf-font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;

  --wf-text-xs: 12px;
  --wf-text-sm: 13px;
  --wf-text-md: 14px;
  --wf-text-lg: 16px;
  --wf-h4: 16px;
  --wf-h3: 18px;
  --wf-h2: 24px;
  --wf-h1: 32px;
  --wf-leading-tight: 1.2;
  --wf-leading-normal: 1.5;
  --wf-leading-relaxed: 1.65;
  --wf-weight-regular: 400;
  --wf-weight-heading: 600;

  --wf-space-1: 4px;
  --wf-space-2: 8px;
  --wf-space-3: 12px;
  --wf-space-4: 16px;
  --wf-space-5: 20px;
  --wf-space-6: 24px;
  --wf-space-8: 32px;
  --wf-space-10: 40px;
  --wf-space-12: 48px;

  --wf-radius-xs: 4px;
  --wf-radius-sm: 6px;
  --wf-radius-md: 8px;
  --wf-radius-lg: 10px;
  --wf-radius-xl: 12px;
  --wf-radius-pill: 999px;

  --wf-primary: #2563eb;
  --wf-primary-hover: #1d4ed8;
  --wf-primary-soft: #eff6ff;
  --wf-aurora: #7c5ce7;
  --wf-success: #159a67;
  --wf-warning: #d88a13;
  --wf-danger: #dc3e4d;
  --wf-info: #1687c9;

  --wf-bg: #f6f8fb;
  --wf-surface: #ffffff;
  --wf-surface-subtle: #f9fafb;
  --wf-surface-raised: #ffffff;
  --wf-surface-hover: #f3f6fa;
  --wf-border: #e2e7ee;
  --wf-border-strong: #cfd7e2;
  --wf-text: #10243e;
  --wf-text-secondary: #52657b;
  --wf-text-tertiary: #748397;
  --wf-icon: #5e7188;
  --wf-focus: rgba(37, 99, 235, .20);
  --wf-overlay: rgba(9, 23, 43, .52);
  --wf-shadow-xs: 0 1px 2px rgba(15, 35, 58, .04);
  --wf-shadow-sm: 0 3px 10px rgba(15, 35, 58, .06);
  --wf-shadow-md: 0 10px 30px rgba(15, 35, 58, .08);

  --wf-sidebar-bg: #0b1d32;
  --wf-sidebar-surface: #10263f;
  --wf-sidebar-text: #b5c1cf;
  --wf-sidebar-text-active: #ffffff;
  --wf-sidebar-border: rgba(255,255,255,.08);
}

html[data-theme="dark"] {
  color-scheme: dark;
  --wf-bg: #081421;
  --wf-surface: #0d1b2a;
  --wf-surface-subtle: #101f30;
  --wf-surface-raised: #122235;
  --wf-surface-hover: #16293d;
  --wf-border: #203247;
  --wf-border-strong: #31465e;
  --wf-text: #edf3fa;
  --wf-text-secondary: #b7c3d2;
  --wf-text-tertiary: #91a1b4;
  --wf-icon: #a3b1c2;
  --wf-primary-soft: rgba(37, 99, 235, .14);
  --wf-focus: rgba(78, 136, 255, .25);
  --wf-overlay: rgba(1, 8, 16, .70);
  --wf-shadow-xs: 0 1px 2px rgba(0,0,0,.20);
  --wf-shadow-sm: 0 4px 14px rgba(0,0,0,.22);
  --wf-shadow-md: 0 14px 34px rgba(0,0,0,.28);
  --wf-sidebar-bg: #07111c;
  --wf-sidebar-surface: #0d1d2e;
  --wf-sidebar-border: rgba(255,255,255,.07);
}

/* Typography contract: only H1-H4 are heavier inside migrated enterprise UI. */
.enterprise-ui {
  font-family: var(--wf-font-sans);
  font-size: var(--wf-text-md);
  line-height: var(--wf-leading-normal);
  font-weight: var(--wf-weight-regular);
  background: var(--wf-bg);
  color: var(--wf-text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.enterprise-ui h1,
.enterprise-ui h2,
.enterprise-ui h3,
.enterprise-ui h4 {
  color: var(--wf-text);
  font-weight: var(--wf-weight-heading);
  letter-spacing: -.02em;
}
.enterprise-ui h1 { font-size: var(--wf-h1); line-height: 1.25; }
.enterprise-ui h2 { font-size: var(--wf-h2); line-height: 1.32; }
.enterprise-ui h3 { font-size: var(--wf-h3); line-height: 1.4; }
.enterprise-ui h4 { font-size: var(--wf-h4); line-height: 1.45; }
.enterprise-ui p,
.enterprise-ui span,
.enterprise-ui small,
.enterprise-ui label,
.enterprise-ui input,
.enterprise-ui select,
.enterprise-ui textarea,
.enterprise-ui button,
.enterprise-ui a,
.enterprise-ui th,
.enterprise-ui td,
.enterprise-ui strong,
.enterprise-ui b {
  font-weight: var(--wf-weight-regular);
}
.enterprise-ui small,
.enterprise-ui .wf-text-small { font-size: var(--wf-text-sm); color: var(--wf-text-secondary); }
.enterprise-ui .wf-text-micro { font-size: var(--wf-text-xs); color: var(--wf-text-tertiary); }
.enterprise-ui .wf-mono { font-family: var(--wf-font-mono); }

/* Icons: 20px default, 1.75px stroke, currentColor. */
.wf-icon {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  color: var(--wf-icon);
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}
.wf-icon-sm { width:16px; height:16px; flex-basis:16px; }
.wf-icon-lg { width:24px; height:24px; flex-basis:24px; }

/* Canonical surface primitives. */
.wf-card {
  background: var(--wf-surface);
  border: 1px solid var(--wf-border);
  border-radius: var(--wf-radius-xl);
  box-shadow: var(--wf-shadow-xs);
}
.wf-card-subtle { background: var(--wf-surface-subtle); box-shadow:none; }
.wf-section { padding: var(--wf-space-6); }
.wf-stack { display:flex; flex-direction:column; gap:var(--wf-space-4); }
.wf-cluster { display:flex; align-items:center; gap:var(--wf-space-3); flex-wrap:wrap; }
.wf-grid-4 { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--wf-space-4); }
.wf-grid-3 { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--wf-space-4); }
.wf-grid-2 { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--wf-space-4); }

/* Buttons: labels remain regular weight. */
.wf-button {
  min-height: 38px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding: 0 14px;
  border-radius: var(--wf-radius-md);
  border:1px solid transparent;
  font: inherit;
  font-weight: var(--wf-weight-regular);
  text-decoration:none;
  white-space:nowrap;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.wf-button:focus-visible,
.wf-input:focus-visible,
.wf-select:focus-visible,
.wf-textarea:focus-visible { outline:3px solid var(--wf-focus); outline-offset:1px; }
.wf-button-primary { background:var(--wf-primary); color:#fff; }
.wf-button-primary:hover { background:var(--wf-primary-hover); }
.wf-button-secondary { background:var(--wf-surface); border-color:var(--wf-border-strong); color:var(--wf-text); }
.wf-button-secondary:hover,
.wf-button-ghost:hover { background:var(--wf-surface-hover); }
.wf-button-ghost { background:transparent; color:var(--wf-text-secondary); }
.wf-button-danger { background:transparent; border-color:rgba(220,62,77,.42); color:var(--wf-danger); }

/* Forms. */
.wf-field { display:grid; gap:6px; min-width:0; }
.wf-field > label { color:var(--wf-text-secondary); font-size:var(--wf-text-sm); }
.wf-input,
.wf-select,
.wf-textarea {
  width:100%;
  min-width:0;
  border:1px solid var(--wf-border-strong);
  border-radius:var(--wf-radius-md);
  background:var(--wf-surface);
  color:var(--wf-text);
  font:inherit;
  font-weight:var(--wf-weight-regular);
}
.wf-input,.wf-select { height:40px; padding:0 12px; }
.wf-textarea { min-height:96px; padding:10px 12px; resize:vertical; }
.wf-input::placeholder,.wf-textarea::placeholder { color:var(--wf-text-tertiary); }

/* Status badges. */
.wf-badge {
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height:24px;
  padding:2px 8px;
  border-radius:var(--wf-radius-pill);
  border:1px solid var(--wf-border);
  background:var(--wf-surface-subtle);
  color:var(--wf-text-secondary);
  font-size:var(--wf-text-xs);
  font-weight:var(--wf-weight-regular);
}
.wf-badge::before { content:""; width:6px; height:6px; border-radius:50%; background:currentColor; }
.wf-badge-success { color:var(--wf-success); background:color-mix(in srgb,var(--wf-success) 9%,var(--wf-surface)); border-color:color-mix(in srgb,var(--wf-success) 20%,var(--wf-border)); }
.wf-badge-warning { color:var(--wf-warning); background:color-mix(in srgb,var(--wf-warning) 9%,var(--wf-surface)); border-color:color-mix(in srgb,var(--wf-warning) 22%,var(--wf-border)); }
.wf-badge-danger { color:var(--wf-danger); background:color-mix(in srgb,var(--wf-danger) 8%,var(--wf-surface)); border-color:color-mix(in srgb,var(--wf-danger) 20%,var(--wf-border)); }
.wf-badge-info { color:var(--wf-info); background:color-mix(in srgb,var(--wf-info) 8%,var(--wf-surface)); border-color:color-mix(in srgb,var(--wf-info) 20%,var(--wf-border)); }

/* Tabs. */
.wf-tabs { display:flex; gap:20px; border-bottom:1px solid var(--wf-border); overflow-x:auto; }
.wf-tab { position:relative; display:inline-flex; align-items:center; min-height:42px; padding:0 1px; color:var(--wf-text-secondary); text-decoration:none; white-space:nowrap; }
.wf-tab[aria-current="page"],.wf-tab.is-active { color:var(--wf-primary); }
.wf-tab[aria-current="page"]::after,.wf-tab.is-active::after { content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px; background:var(--wf-primary); }

/* KPI. */
.wf-kpi { padding:16px; }
.wf-kpi-label { display:block; color:var(--wf-text-secondary); font-size:var(--wf-text-sm); }
.wf-kpi-value { display:block; margin-top:8px; font-size:26px; line-height:1.15; letter-spacing:-.025em; font-weight:var(--wf-weight-regular); color:var(--wf-text); }
.wf-kpi-meta { display:block; margin-top:6px; color:var(--wf-text-tertiary); font-size:var(--wf-text-xs); }

/* Tables. */
.wf-table-wrap { overflow:auto; border:1px solid var(--wf-border); border-radius:var(--wf-radius-xl); background:var(--wf-surface); }
.wf-table { width:100%; border-collapse:collapse; font-size:var(--wf-text-sm); }
.wf-table th,.wf-table td { padding:11px 14px; text-align:left; border-bottom:1px solid var(--wf-border); font-weight:var(--wf-weight-regular); }
.wf-table th { color:var(--wf-text-tertiary); background:var(--wf-surface-subtle); font-size:var(--wf-text-xs); }
.wf-table td { color:var(--wf-text-secondary); }
.wf-table tr:last-child td { border-bottom:0; }
.wf-table tbody tr:hover { background:var(--wf-surface-hover); }

/* Notices and Aurora insight. */
.wf-notice { display:flex; align-items:flex-start; gap:12px; padding:14px 16px; border:1px solid var(--wf-border); border-radius:var(--wf-radius-lg); background:var(--wf-surface-subtle); }
.wf-notice-success { border-color:color-mix(in srgb,var(--wf-success) 24%,var(--wf-border)); background:color-mix(in srgb,var(--wf-success) 7%,var(--wf-surface)); }
.wf-aurora {
  border:1px solid color-mix(in srgb,var(--wf-aurora) 20%,var(--wf-border));
  background:linear-gradient(135deg,color-mix(in srgb,var(--wf-aurora) 8%,var(--wf-surface)),var(--wf-surface) 58%);
}
.wf-aurora-mark { width:32px; height:32px; display:grid; place-items:center; border-radius:var(--wf-radius-md); color:var(--wf-aurora); background:color-mix(in srgb,var(--wf-aurora) 12%,var(--wf-surface)); }

/* Theme control primitive. */
.wf-theme-toggle { width:38px; height:38px; padding:0; border:1px solid var(--wf-border); border-radius:var(--wf-radius-md); background:var(--wf-surface); color:var(--wf-text-secondary); display:inline-grid; place-items:center; }
.wf-theme-toggle:hover { background:var(--wf-surface-hover); }

@media (max-width: 1000px) {
  .wf-grid-4 { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .wf-grid-3 { grid-template-columns:1fr; }
}
@media (max-width: 680px) {
  :root { --wf-h1:28px; --wf-h2:22px; }
  .wf-grid-4,.wf-grid-2 { grid-template-columns:1fr; }
  .wf-section { padding:var(--wf-space-4); }
}