/* Touch2build brand colors — same tokens as the Angular app (touch2build-app/angular/src/styles.css) */
:root {
  --t2b-primary: #fa6f57;
  --t2b-primary-dark: #da4f37;
  --t2b-sidebar-bg: #1a1f2c;
  --t2b-sidebar-hover: #252a38;
  --t2b-dark: #2c3e50;
  --t2b-status-open: #5555ff;
  --t2b-status-resolved: #00bb00;
  --t2b-status-closed: #000000;
}

[data-md-color-primary="custom"] {
  --md-primary-fg-color: var(--t2b-sidebar-bg);
  --md-primary-fg-color--light: var(--t2b-sidebar-hover);
  --md-primary-fg-color--dark: #10131b;
  --md-primary-bg-color: #ffffff;
  --md-primary-bg-color--light: #ffffffb3;
}

[data-md-color-accent="custom"] {
  --md-accent-fg-color: var(--t2b-primary);
  --md-accent-fg-color--transparent: #fa6f571a;
  --md-accent-bg-color: #ffffff;
}

[data-md-color-scheme="default"] {
  --md-typeset-a-color: var(--t2b-primary-dark);
  --md-default-bg-color: #ffffff;
}

[data-md-color-scheme="slate"] {
  --md-hue: 225;
  --md-typeset-a-color: var(--t2b-primary);
}

[data-md-color-scheme="default"] .md-typeset h1,
[data-md-color-scheme="default"] .md-typeset h2,
[data-md-color-scheme="default"] .md-typeset h3 {
  color: var(--t2b-dark);
  font-weight: 700;
}

/* Tabs bar uses the sidebar color, active tab in coral */
.md-tabs {
  background-color: var(--t2b-sidebar-bg);
}

.md-tabs .md-tabs__link {
  color: #ffffffb3;
}

.md-tabs .md-tabs__link:hover,
.md-tabs .md-tabs__item--active .md-tabs__link {
  color: var(--t2b-primary);
}

.md-header__button.md-logo img {
  border-radius: 6px;
}

.md-typeset .md-button {
  border-radius: 6px;
  font-weight: 600;
}

.md-typeset .md-button--primary {
  background-color: var(--t2b-primary);
  border-color: var(--t2b-primary);
  color: #fff;
}

.md-typeset .md-button--primary:hover {
  background-color: var(--t2b-primary-dark);
  border-color: var(--t2b-primary-dark);
}

/* Screenshots */
.md-typeset img.capture {
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* UI labels quoted in the text, e.g. [Nouveau projet]{.ui} */
.md-typeset .ui {
  font-weight: 600;
  white-space: nowrap;
}

/* Task status chips */
.md-typeset .statut {
  display: inline-block;
  padding: 0 .5em;
  border-radius: 4px;
  font-size: .85em;
  font-weight: 600;
}
.md-typeset .statut--ouvert { background: #eeeeff; color: #3333cc; }
.md-typeset .statut--resolu { background: #e6f9e6; color: #008800; }
.md-typeset .statut--ferme { background: #e9ecef; color: #495057; }

.md-typeset .grid.cards > ul > li:hover {
  border-color: var(--t2b-primary);
}