/* Color tokens y theming system (Figma MCP) */
:root,
.theme-default {
  --brand-primary-logo: #1D1D1D;
  --surface-background: #FFFFFF;
  --surface-surface: #F5F5F5;
  --surface-accent: #E8E8E8;
  --surface-brand: #737373;
  --surface-dark: #1D1D1D;
  --surface-title: #333333;
  --surface-paragraph: #737373;
  --tag-background: #F5F5F5;
  --tag-text: #1D1D1D;
  --tag-stroke: #E8E8E8;
  --button-background: #1D1D1D;
  --button-text: #FFFFFF;
  --button-border: #1D1D1D;
  --text-title: #333333;
  --text-subtitle: #737373;
  --text-tagline: #737373;
  --text-caption: #737373;
  --text-hover: #bbbbbb;
  --button-background-hover: #444;
  --button-border-hover: #444;

}

.theme-light {
  --brand-primary-logo: #1D1D1D;
  --surface-background: #F5F5F5;
  --surface-surface: #FFFFFF;
  --surface-accent: #E8E8E8;
  --surface-brand: #737373;
  --surface-dark: #1D1D1D;
  --surface-title: #1D1D1D;
  --surface-paragraph: #333333;
  --tag-background: #FFFFFF;
  --tag-text: #1D1D1D;
  --tag-stroke: #E8E8E8;
  --button-background: #1D1D1D;
  --button-text: #FFFFFF;
  --button-border: #1D1D1D;
  --text-title: #1D1D1D;
  --text-subtitle: #333333;
  --text-tagline: #333333;
  --text-caption: #333333;
  --text-hover: #bbbbbb;
}

.theme-medium {
  --brand-primary-logo: #1D1D1D;
  --surface-background: #E8E8E8;
  --surface-surface: #FFFFFF;
  --surface-accent: #BBBBBB;
  --surface-brand: #737373;
  --surface-dark: #1D1D1D;
  --surface-title: #1D1D1D;
  --surface-paragraph: #333333;
  --tag-background: #FFFFFF;
  --tag-text: #333333;
  --tag-stroke: #BBBBBB;
  --button-background: #1D1D1D;
  --button-text: #FFFFFF;
  --button-border: #1D1D1D;
  --text-title: #1D1D1D;
  --text-subtitle: #333333;
  --text-tagline: #333333;
  --text-caption: #333333;
  --text-hover: #bbbbbb;
}

.theme-dark {
  --brand-primary-logo: #FFFFFF;
  --surface-background: #1D1D1D;
  --surface-surface: #333333;
  --surface-accent: #E8E8E8;
  --surface-brand: #737373;
  --surface-dark: #1D1D1D;
  --surface-title: #F5F5F5;
  --surface-paragraph: #E8E8E8;
  --tag-background: #333333;
  --tag-text: #E8E8E8;
  --tag-stroke: #1D1D1D;
  --button-background: #FFFFFF;
  --button-text: #1D1D1D;
  --button-border: #FFFFFF;
  --text-title: #F5F5F5;
  --text-subtitle: #E8E8E8;
  --text-tagline: #E8E8E8;
  --text-caption: #E8E8E8;
  --text-hover: #bbbbbb;
}


body, .surface {
  background: var(--surface-background);
  color: var(--surface-title);
}

h1, h3, h4, h5 {
  color: var(--text-title, var(--surface-title));
}
h6 {
  color: var(--text-caption, var(--surface-paragraph));
}
h2, p {
  color: var(--surface-paragraph);
}
p.caption-bold {
  color: var(--text-title, var(--surface-paragraph));
}
p.caption-regular {
  color: var(--text-caption, var(--surface-paragraph));
}

.tag {
  background: var(--tag-background);
  color: var(--tag-text);
  border: 1px solid var(--tag-stroke);
}

p > a, h5 > a, h2 > a {
  color: var(--surface-paragraph);
}

a {text-decoration: none!important;}
a.link {text-decoration: underline!important; color: var(--text-title, var(--surface-title)); font-family: var(--font-caption-bold);}

.menu-dropdown-links a
.menu-dropdown-links a h4 {
  text-decoration: none!important;
}

.button,
a.button {
  background: var(--button-background);
  color: var(--button-text);
  border-color: var(--button-border);
}
.button:hover,
a.button:hover {
  background: var(--button-background-hover);
  border-color: var(--button-border-hover);
}
.button-secondary {
  background: var(--button-text);
  color: var(--button-background);
}

button p, a.button p, button h2, a.button h2 {
  color: var(--button-text, #fff);
}
.menu-links a.active > p{
  color: var(--text-hover)
}

.bullet-list p.title {
  color: var(--text-title);
  font-family: var(--font-caption-bold);
}