/* Brand variables (auto-generated from Settings -> Style or Theme) */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&family=Inter:wght@400;500;600;700&display=swap');
:root {
  --brand-primary: #00c0a5;
  --brand-accent: #0190d5;
  --brand-deep: #055eb8;
  --brand-text: #0f172a;
  --brand-bg-app: #f8fafc;
  --brand-success: #10b981;
  --brand-warning: #f5b041;
  --brand-danger: #ef4444;
  --brand-info: #0190d5;
  --brand-cta: #000000;
  --brand-accent-gradient: linear-gradient(135deg, #00c0a5 0%, #0190d5 100%);
  --brand-gradient: linear-gradient(135deg, #00c0a5 0%, #0190d5 50%, #055eb8 100%);
  /* Gradient harmony: hero-band mesh + KPI tone stops derived from the
     theme's own hues only (no foreign aqua/cyan or success/info mixes). */
  --sx-aqua: #2FA4DD;
  --sx-cyan: #01A3C2;
  --sx-mint: #47D2BE;
  --au-b-warm: #01A3C2;
  --au-b-cool: #0472B4;
  --brand-font-heading: 'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --brand-font-body: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  /* Override the legacy variable names so existing components reskin too */
  --accent: #00c0a5;
  --accent-2: #0190d5;
  --accent-strong: #0190d5;
  --accent-deep: #055eb8;
  --green: #10b981;
  --gold: #f5b041;
  --orange: #f5b041;
  --red: #ef4444;
  --teal-glow: color-mix(in srgb, #00c0a5 11%, transparent);
  --teal-glow-strong: color-mix(in srgb, #00c0a5 22%, transparent);
  --blue-glow: color-mix(in srgb, #0190d5 11%, transparent);
  --blue-glow-strong: color-mix(in srgb, #0190d5 26%, transparent);
  --accent-soft: color-mix(in srgb, #00c0a5 12%, transparent);
  --border-focus: #00c0a5;
}
body { font-family: var(--brand-font-body); }
h1, h2, h3, h4 { font-family: var(--brand-font-heading); }

/* MODERN & BOLD skin - navy darks, aurora glow */
html[data-theme="dark"] {
  --bg-base:        color-mix(in srgb, var(--accent-deep) 16%, #05070F);
  --bg-elevated:    color-mix(in srgb, var(--accent-deep) 22%, #0A0F1C);
  --bg-card:        color-mix(in srgb, var(--accent-deep) 24%, #0B111E);
  --bg-card-hover:  color-mix(in srgb, var(--accent-deep) 30%, #101728);
  --bg-input:       color-mix(in srgb, var(--accent-deep) 18%, #06090F);
  --bg-subtle:      color-mix(in srgb, var(--accent-deep) 20%, #080D18);
  --border:         color-mix(in srgb, var(--accent-deep) 32%, #161D31);
  --border-strong:  color-mix(in srgb, var(--accent) 14%, #2A3354);
  --au-canvas:      color-mix(in srgb, var(--accent-deep) 16%, #04060C);
  --au-surface:     color-mix(in srgb, var(--accent-deep) 22%, #0A101D);
  --au-surface-2:   color-mix(in srgb, var(--accent-deep) 18%, #070B14);
}
html[data-theme="dark"] body::before {
  background:
    radial-gradient(1100px 760px at 6% -4%, color-mix(in srgb, var(--accent) 15%, transparent), transparent 60%),
    radial-gradient(950px 700px at 100% 104%, color-mix(in srgb, var(--accent-deep) 22%, transparent), transparent 62%),
    radial-gradient(640px 540px at 88% 4%, color-mix(in srgb, var(--accent-2) 10%, transparent), transparent 66%) !important;
}
html:not([data-theme="dark"]) {
  --bg-base:        color-mix(in srgb, var(--accent) 4%, #F7F9FC);
  --bg-card-hover:  color-mix(in srgb, var(--accent) 5%, #F1F5F9);
  --bg-subtle:      color-mix(in srgb, var(--accent) 5%, #EEF2F7);
  --border:         color-mix(in srgb, var(--accent) 6%, #E2E8F0);
  --au-canvas:      color-mix(in srgb, var(--accent) 5%, #F4F6FB);
  --au-surface-2:   color-mix(in srgb, var(--accent) 3%, #F7F9FC);
}
html:not([data-theme="dark"]) body { background-color: color-mix(in srgb, var(--accent) 4%, #F6F8FC); }