/* BathoTiro Aligned Stylesheet - BUA-SPEAK Design System */
@import './dv8-design-tokens.css';
@import '../branding/theme.runtime.css';
@import './tokens-compat.css';

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  font-family: var(--bathotiro-font-sans);
  font-size: var(--bathotiro-body);
  line-height: var(--bathotiro-lh-normal);
  background: var(--bua-bg-base);
  color: var(--bua-text-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Typography */
h1 {
  font-family: var(--bathotiro-font-display);
  font-size: var(--bathotiro-h1);
  line-height: var(--bathotiro-lh-tight);
  margin: 0 0 var(--bathotiro-sp-4);
  font-weight: var(--bua-weight-bold);
  color: var(--bua-text-primary);
}
h2 {
  font-family: var(--bathotiro-font-display);
  font-size: var(--bathotiro-h2);
  line-height: var(--bathotiro-lh-tight);
  margin: 0 0 var(--bathotiro-sp-3);
  font-weight: var(--bua-weight-semibold);
  color: var(--bua-text-primary);
}
h3 {
  font-family: var(--bathotiro-font-display);
  font-size: var(--bathotiro-h3);
  line-height: var(--bathotiro-lh-tight);
  margin: 0 0 var(--bathotiro-sp-2);
  font-weight: var(--bua-weight-semibold);
  color: var(--bua-text-primary);
}
p { margin: 0 0 var(--bathotiro-sp-3); color: var(--bua-text-primary); }
small { font-size: var(--bathotiro-small); color: var(--bua-text-secondary); }
a { color: var(--bua-text-link); text-decoration: none; transition: color 0.15s ease; }
a:hover { color: var(--bua-text-link-hover); text-decoration: underline; }
:focus-visible {
  outline: 2px solid var(--bua-state-focus-ring);
  outline-offset: 2px;
  border-radius: var(--bua-radius-sm);
}

/* Layout */
.dv8-container { max-width: 1200px; margin: 0 auto; padding: var(--bathotiro-sp-5); }
.dv8-card {
  background: var(--bua-card-bg);
  border: 1px solid var(--bua-card-border);
  border-radius: var(--bathotiro-r-xl);
  box-shadow: var(--bua-card-shadow);
  padding: var(--bathotiro-sp-5);
}
.dv8-panel {
  background: var(--bua-panel-bg-strong);
  border: 1px solid var(--bua-panel-border);
  border-radius: var(--bathotiro-r-md);
  padding: var(--bathotiro-sp-4);
}
.dv8-divider { height: 1px; background: var(--bua-border-base); margin: var(--bathotiro-sp-4) 0; }

/* Buttons */
.dv8-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--bua-space-2); padding: var(--bua-space-3) var(--bua-space-4);
  border-radius: var(--bathotiro-r-md); border: 1px solid var(--bua-border-strong);
  background: transparent; color: var(--bua-text-primary);
  font-family: var(--bathotiro-font-sans); font-size: var(--bathotiro-body);
  font-weight: var(--bua-weight-medium); cursor: pointer; user-select: none;
  transition: all 0.15s ease;
}
.dv8-btn:hover { background: var(--bua-state-hover-bg); border-color: var(--bua-border-emphasis); }
.dv8-btn:active { background: var(--bua-state-active-bg); }
.dv8-btn:disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; }
.dv8-btn-primary {
  background: var(--bua-button-primary-bg);
  border-color: var(--bua-button-primary-bg);
  color: var(--bua-button-primary-text);
}
.dv8-btn-primary:hover {
  background: var(--bua-button-primary-hover-bg);
  border-color: var(--bua-button-primary-hover-bg);
}
.dv8-btn-secondary {
  background: var(--bua-button-secondary-bg);
  border-color: var(--bua-button-secondary-border);
  color: var(--bua-button-secondary-text);
}
.dv8-btn-secondary:hover { background: var(--bua-button-secondary-hover-bg); }
.dv8-btn-danger { background: transparent; border-color: var(--bua-error-border); color: var(--bua-error-text); }
.dv8-btn-danger:hover { background: var(--bua-error-bg); }

/* Form Inputs */
.dv8-input, .dv8-select, .dv8-textarea {
  width: 100%; padding: var(--bua-space-3); border-radius: var(--bathotiro-r-sm);
  border: 1px solid var(--bua-input-border); background: var(--bua-input-bg);
  color: var(--bua-input-text); font-family: var(--bathotiro-font-sans);
  font-size: var(--bathotiro-body); transition: all 0.15s ease;
}
.dv8-input:focus, .dv8-select:focus, .dv8-textarea:focus {
  outline: none; border-color: var(--bua-input-border-focus);
  box-shadow: var(--bua-state-focus-shadow);
}
.dv8-input::placeholder, .dv8-select::placeholder, .dv8-textarea::placeholder {
  color: var(--bua-input-placeholder);
}

/* Table */
.dv8-table {
  width: 100%; border-collapse: collapse;
  border: 1px solid var(--bua-border-base);
  border-radius: var(--bathotiro-r-md); overflow: hidden;
}
.dv8-table th, .dv8-table td {
  padding: var(--bua-space-3) var(--bua-space-4);
  border-bottom: 1px solid var(--bua-border-base); text-align: left;
}
.dv8-table th {
  font-weight: var(--bua-weight-semibold);
  background: var(--bua-bg-muted);
  color: var(--bua-text-primary);
}
.dv8-table tr:hover td { background: var(--bua-state-hover-bg); }
.dv8-table tr:last-child td { border-bottom: none; }

/* Alerts */
.dv8-alert {
  border-radius: var(--bathotiro-r-md);
  padding: var(--bua-space-3) var(--bua-space-4);
  border: 1px solid var(--bua-border-strong);
  background: var(--bua-bg-subtle);
}
.dv8-alert-danger { background: var(--bua-error-bg); border-color: var(--bua-error-border); color: var(--bua-error-text); }
.dv8-alert-warning { background: var(--bua-warning-bg); border-color: var(--bua-warning-border); color: var(--bua-warning-text); }
.dv8-alert-info { background: var(--bua-info-bg); border-color: var(--bua-info-border); color: var(--bua-info-text); }
.dv8-alert-success { background: var(--bua-success-bg); border-color: var(--bua-success-border); color: var(--bua-success-text); }

/* Badge */
.dv8-badge {
  display: inline-flex; align-items: center; gap: var(--bua-space-1);
  padding: var(--bua-space-1) var(--bua-space-3);
  border-radius: var(--bathotiro-r-full);
  border: 1px solid var(--bua-border-base);
  background: var(--bua-bg-subtle);
  color: var(--bua-text-secondary);
  font-size: var(--bathotiro-small);
  font-weight: var(--bua-weight-medium);
}
.dv8-badge-critical { border-color: var(--bua-error-border); background: var(--bua-error-bg); color: var(--bua-error-text); }
.dv8-badge-warn { border-color: var(--bua-warning-border); background: var(--bua-warning-bg); color: var(--bua-warning-text); }
.dv8-badge-success { border-color: var(--bua-success-border); background: var(--bua-success-bg); color: var(--bua-success-text); }