:root{
  --primary:#0F1115;
  --primary-dark:#0B0D12;
  --accent:#E11D48;
  --background:#0A0A0B;
  --surface:#111316;
  --surface-alt:#151821;
  --text-primary:#F5F7FA;
  --text-secondary:#CBD5E1;
  --text-muted:#94A3B8;
  --border:#1F2937;
  --brand-rgb:15,17,21;
}

/* Brand token utilities for bracket classes */
.text-\[primary\]{color:var(--primary) !important;}
.text-\[text-primary\]{color:var(--text-primary) !important;}
.text-\[text-secondary\]{color:var(--text-secondary) !important;}
.text-\[text-muted\]{color:var(--text-muted) !important;}

.bg-\[primary\]{background-color:var(--primary) !important;}
.bg-\[primary-dark\]{background-color:var(--primary-dark) !important;}
.bg-\[surface\]{background-color:var(--surface) !important;}
.bg-\[surface-alt\]{background-color:var(--surface-alt) !important;}

.bg-\[primary\]\/5{background-color:rgba(var(--brand-rgb),0.05) !important;}
.bg-\[primary\]\/10{background-color:rgba(var(--brand-rgb),0.10) !important;}
.bg-\[primary\]\/15{background-color:rgba(var(--brand-rgb),0.15) !important;}

.hover\:text-\[primary\]:hover{color:var(--primary) !important;}
.hover\:bg-\[primary\]\/5:hover{background-color:rgba(var(--brand-rgb),0.05) !important;}
.hover\:bg-\[surface-alt\]:hover{background-color:var(--surface-alt) !important;}
.hover\:bg-\[primary-dark\]:hover{background-color:var(--primary-dark) !important;}

.border-\[border\]{border-color:var(--border) !important;}
.border-\[border\]\/40{border-color:color-mix(in srgb, var(--border) 40%, transparent) !important;}
.border-\[border\]\/60{border-color:color-mix(in srgb, var(--border) 60%, transparent) !important;}

/* Scroll reveal (progressively enhanced) */
.js [data-reveal]{opacity:0;transform:translateY(24px);transition:opacity .7s ease-out,transform .7s ease-out;}
.js [data-reveal].is-visible{opacity:1;transform:translateY(0);}
@media (prefers-reduced-motion: reduce){
  .js [data-reveal]{opacity:1;transform:none;transition:none;}
}

/* ApexCharts tooltip polish */
.apexcharts-tooltip{
  border:1px solid rgba(15,23,42,0.08) !important;
  border-radius:12px !important;
  box-shadow:0 12px 32px -8px rgba(15,23,42,0.18) !important;
  background:#ffffff !important;
  color:#0f172a !important;
  padding:8px 10px !important;
  font-family:Inter,system-ui,sans-serif !important;
  backdrop-filter:saturate(140%) blur(6px);
}
.apexcharts-tooltip-title{
  background:transparent !important;
  border-bottom:1px solid rgba(15,23,42,0.06) !important;
  font-weight:600 !important;
  padding:4px 6px 8px !important;
  margin-bottom:4px !important;
  color:#0f172a !important;
  font-family:Inter,system-ui,sans-serif !important;
  font-size:12px !important;
  letter-spacing:-0.005em;
}
.apexcharts-tooltip-series-group{padding:4px 6px !important;}
.apexcharts-tooltip-marker{width:8px !important;height:8px !important;margin-right:8px !important;}
.apexcharts-tooltip-text-y-label,
.apexcharts-tooltip-text-y-value,
.apexcharts-tooltip-text-goals-label,
.apexcharts-tooltip-text-goals-value{
  font-family:Inter,system-ui,sans-serif !important;
  font-size:12px !important;
  line-height:1.4 !important;
  color:#475569 !important;
}
.apexcharts-tooltip-text-y-value{
  color:#0f172a !important;
  font-weight:600 !important;
}
.apexcharts-xaxistooltip, .apexcharts-yaxistooltip{display:none !important;}

/* Optional local font-face declarations (fallback to system if not installed) */
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:local('Inter'), local('Inter Regular'), local('Inter-Regular');
}
@font-face{
  font-family:'Cinzel';
  font-style:normal;
  font-weight:700 800;
  font-display:swap;
  src:local('Cinzel'), local('Cinzel-Bold');
}