@import url('https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@latest/tabler-icons.min.css');

*, *::before, *::after {
  box-sizing: border-box;
}

:root {
  --brand: #534AB7;
  --brand-light: #EEEDFE;
  --brand-mid: #7F77DD;
  --brand-dark: #3C3489;
  --brand-darkest: #26215C;

  --purple-bg: #EEEDFE;
  --teal-bg: #E1F5EE;
  --coral-bg: #FAECE7;
  --blue-bg: #E6F1FB;
  --amber-bg: #FAEEDA;

  --text-primary: #1a1a1a;
  --text-secondary: #6b6b6b;
  --text-muted: #999;

  --border: rgba(0,0,0,0.1);
  --border-strong: rgba(0,0,0,0.18);
  --surface: #fff;
  --surface-raised: #fff;
  --bg: #fafaf9;

  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-pill: 999px;

  --shadow-card: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
}

@media (prefers-color-scheme: dark) {
  :root {
    --brand: #7F77DD;
    --brand-light: #26215C;
    --brand-mid: #AFA9EC;
    --brand-dark: #CECBF6;
    --text-primary: #f0f0f0;
    --text-secondary: #a0a0a0;
    --text-muted: #666;
    --border: rgba(255,255,255,0.1);
    --border-strong: rgba(255,255,255,0.18);
    --surface: #1a1a1a;
    --surface-raised: #222;
    --bg: #111;
    --purple-bg: #26215C;
    --teal-bg: #04342C;
    --coral-bg: #4A1B0C;
    --blue-bg: #042C53;
    --amber-bg: #412402;
  }
}

html { font-size: 16px; }

body {
  font-family: 'DM Sans', sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text-primary);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }

button {
  font-family: inherit;
  cursor: pointer;
}

img { display: block; max-width: 100%; }

/* Utility classes */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.section { padding: 3rem 0; }
.section-sm { padding: 1.5rem 0; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* =========================================================
   WordPress / Gutenberg compatibility
   ========================================================= */

/* Let WordPress block spacing and layout controls keep working.
   Avoid global margin/padding resets on all elements. */

body {
  font-family: 'DM Sans', sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text-primary);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Respect the WordPress admin toolbar when logged in. */
body.admin-bar {
  --wp-admin--admin-bar--height: 32px;
}

/* Keep standard Gutenberg content aligned with the existing site system. */
.wp-site-blocks {
  background: var(--bg);
  color: var(--text-primary);
}

/* Use the existing 1200px system for wide/full-width sections when desired. */
.wp-block-group.is-layout-constrained > .alignwide,
.wp-block-cover.alignwide,
.wp-block-columns.alignwide,
.wp-block-query.alignwide {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

/* Prevent theme defaults from forcing unwanted link colors. */
.wp-site-blocks a {
  color: inherit;
}

/* Preserve accessible focus states for keyboard users. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--brand-mid);
  outline-offset: 2px;
}

/* Make common WordPress controls inherit the site font. */
button,
input,
select,
textarea {
  font: inherit;
}

/* Keep media responsive without interfering with block dimensions. */
.wp-site-blocks img,
.wp-site-blocks video,
.wp-site-blocks canvas,
.wp-site-blocks svg {
  max-width: 100%;
}

/* Optional utility for custom React / Plotly / WebGL embeds. */
.app-shell {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
}

.app-card {
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

/* Optional Gutenberg-friendly section utility. */
.wp-section {
  padding-block: 3rem;
}

.wp-section-sm {
  padding-block: 1.5rem;
}

/* Dark mode follows the same system already defined above. */
@media (prefers-color-scheme: dark) {
  .wp-site-blocks {
    background: var(--bg);
    color: var(--text-primary);
  }
}