/* ZIQAVO - Bootstrap 6 Theme Overrides & App Styles */

:root {
  --bs-font-sans-serif: "DM Sans", system-ui, sans-serif;
  --bs-body-font-family: "DM Sans", system-ui, sans-serif;

  /* Colour tokens. Every value is a light-dark() pair: the active colour scheme comes from
     `data-bs-theme` on <html> (Bootstrap sets `color-scheme` from it; public/js/theme.js picks the
     theme). Components use these tokens instead of literal colours so both themes stay in sync. */
  --color-canvas: light-dark(#f5f7f7, #0e171c);
  --bs-body-bg: var(--color-canvas);
  --bs-body-color: light-dark(#182230, #e5ecef);

  /* Brand: `--color-brand` and `--color-brand-dark` are fills that carry white text and stay the
     same in both themes; text in brand colour uses `--color-brand-text`. */
  --color-brand: #147d70;
  --color-brand-dark: #0f6459;
  --color-brand-text: light-dark(#0f6459, #6cc9b9);
  --color-brand-soft: light-dark(#e8f4f1, #16332f);
  --color-brand-muted: light-dark(#d2e9e3, #1d413c);
  --color-brand-border: light-dark(#a8d2c8, #2b5a53);
  --color-on-brand: #ffffff;

  /* ZIQAVO brand palette (logo colours, see .agents/skills/ziqavo-branding). Accents for graphics,
     gradients and highlights; mint/glow are never text colours on light backgrounds. */
  --ziqavo-abyss: #04161d;
  --ziqavo-ink: #05263a;
  --ziqavo-pine: #0a6b6b;
  --ziqavo-teal: #12a17f;
  --ziqavo-mint: #46f5ad;
  --ziqavo-glow: #2affb3;
  --ziqavo-gradient: linear-gradient(135deg, var(--ziqavo-abyss), #062a33 62%, #0a5a55);
  --ziqavo-accent-gradient: linear-gradient(90deg, var(--ziqavo-teal), var(--ziqavo-mint));
  --color-surface: light-dark(#ffffff, #152128);
  --color-surface-soft: light-dark(#f8fafc, #1a2830);
  --color-surface-raised: light-dark(#ffffff, #1d2c34);
  --color-line: light-dark(#e4e7ec, #26363f);
  --color-line-strong: light-dark(#d0d5dd, #34474f);
  --color-ink: light-dark(#182230, #e5ecef);
  --color-ink-soft: light-dark(#344054, #c2cdd2);
  --color-muted: light-dark(#667085, #94a5ad);
  --color-subtle: light-dark(#98a2b3, #6c7f88);
  --color-success: light-dark(#14915f, #3fcf8e);
  --color-success-soft: light-dark(#eafaf3, #12301f);
  --color-danger: light-dark(#d92d20, #ff7b70);
  --color-danger-soft: light-dark(#fff1f0, #3a1715);
  --color-warning: light-dark(#b54708, #f0a058);
  --color-warning-soft: light-dark(#fffaeb, #3a2a12);
  --color-info-line-bg: light-dark(#f3f6ed, #1d2619);
  --color-info-line-fg: light-dark(#74856f, #b2c2a9);
  --color-info-line-border: #d5a52e;
  --color-shadow: light-dark(rgb(16 24 40 / 10%), rgb(0 0 0 / 45%));
  --color-backdrop: light-dark(rgb(16 24 40 / 45%), rgb(0 0 0 / 65%));

  --shadow-xs: 0 1px 2px light-dark(rgb(16 24 40 / 5%), rgb(0 0 0 / 30%));
  --shadow-sm: 0 2px 8px light-dark(rgb(16 24 40 / 7%), rgb(0 0 0 / 35%));
  --shadow-md: 0 12px 32px light-dark(rgb(16 24 40 / 10%), rgb(0 0 0 / 45%));
}

body {
  font-family: var(--bs-font-sans-serif);
}

h1,
h2,
h3,
h4,
h5,
h6,
strong {
  font-family: "Manrope", system-ui, sans-serif;
}

.app-body h1,
.app-body h2 {
  letter-spacing: -0.035em;
}