:root {
  --primary: #2AB77E;
  --secondary: #2D5343;
  --base: #ECF5F0;   
  --neutral: #173629;

  --light-1: #FFFFFF;
  --light-2: #ECF5F0;
  --light-3: #DEEDE7;
  --dark-1: #173629;
  --dark-2: #2D5343;
  --dark-3: #476B5D;

  --btn-primary-label: var(--dark-1);      
  --primary-hover: var(--primary-l-2);     
  --btn-outline-color: var(--dark-1);
  --focus-color: var(--dark-1);
  --field-border-color: var(--dark-3);
  --tagline-color: var(--dark-1);
  --link-hover-color: var(--primary-d-2);

}

:root[data-theme="dark"] {
  color-scheme: dark;
  --light-1: #11241B;            
  --light-2: #183026;            
  --light-3: #2A4C3E;            
  --dark-1: #F4FAF7;             
  --dark-2: #C8DCD2;             
  --dark-3: #9DBAAD;             
  --surface-raised: #203D31;     
  --card-border-color: #568773;   
  --brand-ink: var(--primary);   
  --link-hover-color: var(--primary);
  --btn-primary-label: #173629;  
  --tagline-bg: #2A4C3E;
  --logo-filter: invert(1);
  --success-text: color-mix(in oklab, var(--success), white 30%);
  --warning-text: color-mix(in oklab, var(--warning), white 30%);
  --danger-text: color-mix(in oklab, var(--danger), white 45%);
}
:where(:root[data-theme="dark"]) :is(.is-dark, .is-primary, .is-primary-dark) {
  color-scheme: light;
  --light-1: #FFFFFF;
  --light-2: #ECF5F0;
  --light-3: #DEEDE7;
  --dark-1: #173629;
  --dark-2: #2D5343;
  --dark-3: #476B5D;
  --surface-raised: var(--white);
  --card-border-color: var(--base-d-3);
  --brand-ink: var(--primary-d-1);
  --field-border-color: var(--dark-3);
  --tagline-bg: var(--primary-l-10);
  --tagline-color: var(--dark-1);
  --logo-filter: none;
}
:where(:root[data-theme="dark"]) :is(.is-primary, .is-primary-dark) {
  --success-text: color-mix(in oklab, var(--success), black 32%);
  --warning-text: color-mix(in oklab, var(--warning), black 32%);
  --danger-text: color-mix(in oklab, var(--danger), black 16%);
}
:where(:root[data-theme="dark"]) .is-dark { --dark-1: #0A1611; }   
:where(:root[data-theme="dark"]) .panel.is-dark { --dark-1: #1A5A3E; --dark-3: #2C7552; --muted-color: var(--light-3); }   
:root[data-theme="dark"] :is(.is-dark, .is-primary, .is-primary-dark) .cta-form {
  color-scheme: dark;
  --light-1: #11241B;
  --light-2: #183026;
  --light-3: #2A4C3E;
  --dark-1: #F4FAF7;
  --dark-2: #C8DCD2;
  --dark-3: #9DBAAD;
  --surface-raised: #203D31;
  --card-border-color: #568773;
  --brand-ink: var(--primary);
  --field-border-color: var(--dark-3);
  --link-hover-color: var(--primary);
  --focus-color: var(--dark-1);
  --success-text: color-mix(in oklab, var(--success), white 30%);
  --warning-text: color-mix(in oklab, var(--warning), white 30%);
  --danger-text: color-mix(in oklab, var(--danger), white 45%);
}